0

Hey so I have an image that I wanted to add to an svg circle, but I must do so using an external CSS. I'm not quite sure how to do so. I have tried adding the background-image in, but that doesn't work. I have also tried fill: url(#"image.png"). It must be an svg because it's a javascript game that I have that uses svgs. Please help!

Sonya Blade
  • 11
  • 3
  • 1
    Possible duplicate of [Fill SVG path element with a background-image](http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) – Aziz Dec 18 '16 at 03:11

1 Answers1

1

There is no way to do this using an arbitrary image URL.

The best you can really do is switch between a selection of designated backgrounds. As an example, in the demo below we are giving each of the circles a different background pattern:

#circle1 {
  fill: url(#myPattern1);
}

#circle2 {
  fill: url(#myPattern2);
}
<svg width="200" height="100">
  <defs>

    <pattern id="myPattern1" patternUnits="userSpaceOnUse"
             width="100" height="100">
      <image href="http://lorempixel.com/output/cats-q-c-100-100-1.jpg"
             x="0" y="0" width="100" height="100" />
    </pattern>

    <pattern id="myPattern2" patternUnits="userSpaceOnUse"
             width="100" height="100">
      <image href="http://lorempixel.com/output/cats-q-c-100-100-3.jpg"
             x="0" y="0" width="100" height="100" />
    </pattern>

  </defs>

  <circle id="circle1" cx="50" cy="50" r="50" />
  <circle id="circle2" cx="150" cy="50" r="50" />

</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • what exactly does the tag do? – Sonya Blade Dec 18 '16 at 04:42
  • It's a container for elements that are used elsewhere and are not rendered directly. See https://www.w3.org/TR/SVG/single-page.html#struct-Head – Paul LeBeau Dec 18 '16 at 04:44
  • Well when I tried doing this, it did fill in the image desired, but for some reason it stops my code. The svg circle that this image is going onto is controlled by the cursor's position, but when I put in the code to change the image, it stopped taking the cursor's input all together for some reason – Sonya Blade Dec 18 '16 at 04:51
  • It sounds like you have accidentally broken it somehow with your changes. This technique itself shouldn't be the cause. – Paul LeBeau Dec 18 '16 at 05:10