CODEWITHSUNDEEP
javascripthtmlcsssvg
Radex
Radex

Reputation: 8577

SVG does not display

The following SVG does not display, what is the problem? It should display with size 40x40px with a color.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="20 20 40 40" fill="#14cc9e">

<path d="M1096 301.5a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z"></path>

</svg>

Upvotes: 1

Views: 212

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14545

You can use the command transform = 'translate (-1090 -275)

The fill command works in the svg file header, but it's more correct to move it to the patch

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40"  style="border:1px solid red;"> 
<g transform="translate(-1090 -275)">
<path fill="#14cc9e" d="M1096 301.5 a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z">
</path> 
</g>

</svg>

To find the image, it is convenient to use a frame that shows the boundaries of svg in the browser window.

style="border:1px solid red;"

After debugging, the frame can be removed.

  • The second option

    You can also shift the image using parameters min-x, min-y viewBox="1090 275 40 40"

<svg  width="40px" height="40px" viewBox="1090 275 40 40"  > 

<path fill="#14cc9e" d="M1096 301.5 a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z">
</path> 
</svg>

Upvotes: 1

P_Andre
P_Andre

Reputation: 791

You're setting the svg background color with fill. As far as I know this doesn't work. Try using property background-color instead.

Upvotes: 0

Related Questions