CODEWITHSUNDEEP
htmlsvg
kurumkan
kurumkan

Reputation: 2725

Can't insert sprite into svg

I wan't to insert sprite into my svg. Why this doesn't work?

 <svg width="100" height="100">
 <image xlink:href="blank.gif" class="flag flag-ru" x="10" y="10"      height="50" width="50"></image>
</svg>

But this work

<img src="blank.gif" class="flag flag-ru" alt="Czech Republic" />

I am using these sprites

How can I make the sprite work in my svg

Upvotes: 0

Views: 91

Answers (2)

kurumkan
kurumkan

Reputation: 2725

I couldn't find proper "pure" svg solution. Instead I defined additional css class:

 .myDiv{
    position: absolute;
  }


<svg width="100" height="100"> 
  <img src="blank.gif" class="flag flag-cz myDiv" alt=""  
  style="top:10px; left:10px;"/>
</svg>

Upvotes: 0

Matey
Matey

Reputation: 1210

These flag sprites shift <img> element's background-image via the CSS property background-position in order to display different parts of the larger image. Applying this CSS to SVG element <image> has no effect because the <image> element has no background-image or background-position.

Upvotes: 2

Related Questions