用图标替换svg元素

Question

Replace Circle Elements with Icons

I am trying to make my SVG circle elements look like shopping carts. Is there a way to completely replace the definition of a circle element in svg so that it renders a certain icon ?

I'd like

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

to look like

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

If not, is there a simpler way to display an icon whenever the circle element is called ? Thank you very much !

Answer 1

You can try styling the <circle> element with CSS's background-image property:

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

Answer 2

You can define your own elements and call those instead of circles. This way you can still use circles if needed elsewhere.

If you are not looking to use CSS you can use "defs" and "use".

<?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>