Попытка добавить изображение в круг SVG с помощью css

Question

Эй, у меня есть изображение, которое я хотел добавить в круг SVG, но я должен сделать это, используя внешний CSS. Я не совсем уверен, как это сделать. Я попытался добавить фоновое изображение, но это не работает. Я также попробовал fill: url (# "image.png"). Это должен быть svg, потому что это javascript-игра, в которой я использую svgs. Пожалуйста помоги!

Answer 1

Невозможно сделать это с использованием произвольного URL изображения.

Лучшее, что вы действительно можете сделать, это переключиться между выбором выделенного фона. В качестве примера, в демо-версии ниже мы даем каждому из кругов другого рисунка фона:

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