Question

我不想将精灵插入我的svg。为什么这不起作用？

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

但是这项工作

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

我正在使用these sprites

如何让sprite在我的svg中运行

Answer 1

这些标记精灵通过CSS属性<img>移动background-image元素background-position，以显示较大图像的不同部分。将此CSS应用于SVG元素<image>无效，因为<image>元素没有background-image或background-position。

Answer 2

我找不到合适的＆＃34;纯粹的＆＃34; svg解决方案。相反，我定义了额外的css类：

 .myDiv{
    position: absolute;
  }


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

无法将精灵插入svg

2 个答案: