SVG-Morpheus icon indicating copy to clipboard operation
SVG-Morpheus copied to clipboard

Published 20 hours ago • verified publisher icon alexk111

putting my svg code inside iconset and initializing breaks the svg

Open ssuess opened this issue 7 years ago • 1 comments

My svg looks just fine in a web browser when added normally. But when I add it to an icon set to make it work with SVG-Morpheus, it is no longer correct. I have an X form (made of 4 rectangles).

Here is the svg code that works:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="162.984px" height="163.366px" viewBox="0 0 162.984 163.366" enable-background="new 0 0 162.984 163.366" xml:space="preserve"> <rect x="71.125" y="34.736" transform="matrix(0.7071 -0.7071 0.7071 0.7071 6.6372 98.2234)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.728"/> <rect x="-9.66" y="115.903" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -74.4179 64.8729)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.728"/> <rect x="-9.66" y="34.736" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 41.1004 99.2236)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.727"/> <rect x="71.125" y="115.903" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 121.6148 294.9077)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.727"/> </svg>

screen shot 2016-09-02 at 4 27 17 pm

but after adding the following to the iconset it shows as two horizontal lines when morphing or being morphed to:

<g id="crossicon"> <rect x="71.125" y="34.736" transform="matrix(0.7071 -0.7071 0.7071 0.7071 6.6372 98.2234)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.728"/> <rect x="-9.66" y="115.903" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -74.4179 64.8729)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.728"/> <rect x="-9.66" y="34.736" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 41.1004 99.2236)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.727"/> <rect x="71.125" y="115.903" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 121.6148 294.9077)" stroke="#000000" stroke-miterlimit="10" width="101.52" height="12.727"/> </g>

screen shot 2016-09-02 at 4 26 46 pm

ssuess avatar Sep 02 '16 20:09 ssuess

I am guessing this code does not work with rect. I converted to path and now it is working.

ssuess avatar Sep 02 '16 23:09 ssuess