用图标替换svg元素

Question

用图标替换圆形元素

我想让我的SVG圈子元素看起来像购物车。有没有办法在svg中完全替换圆元素的定义，以便呈现某个图标？

我喜欢

<circle cx="280px" cy="411px" r="4.976112128"></circle>

看起来像

  

<i class="fa fa-shopping-cart"></i>

如果没有，是否有更简单的方法在调用圆形元素时显示图标？ 非常感谢你！

Answer 1

您可以尝试使用CSS的background-image属性设置<circle>元素的样式：

circle {
    background-image: url(http://www.example.com/bck.png);
}

Answer 2

您可以定义自己的元素并调用它们而不是圆圈。这样，您可以在其他地方使用圈子。

如果您不想使用CSS，可以使用＆＃34; defs＆＃34;和＆＃34;使用＆＃34;。

<?xml version="1.0" encoding="utf-8"?>
<!-- from this website http://tutorials.jenkov.com/svg/svg-and-css.html -->

<svg 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

<defs> 
  <g id="shopcart"> 
      <image x="499.5" y="242.4" height="40" width="40" id="cart" preserveAspectRatio="none" xlink:href="c:\temp\cart.png" opacity="1" style="pointer-events: none"/>
  </g> 
</defs> 

<use xlink:href="#shopcart" x="10" y="50" transform="translate(150,50)" />
<use xlink:href="#shopcart" x="100" y="250" /> 
<use xlink:href="#shopcart" x="200" y="250" /> 
<use xlink:href="#shopcart" x="300" y="250" /> 

</svg>