Заполнение кружка SVG изображением не работает

Question

Заполнение кружка SVG изображением не работает

0

Настройка изображения в качестве фона для SVG-круга динамически не работает. Я сделал это, установив URL-адрес изображения в атрибут заполнения SVG-круга, как показано ниже.

  document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)");

Вот скрипка.

Есть ли способ заполнить изображение?

Swarna Latha 21 дек. 2013, в 07:41

Источник

0

возможный дубликат элемента Fill SVG path с фоновым изображением
Robert Longson 21 дек. 2013, в 07:12

Теги:

javascript

jquery

svg

1 ответ

Ещё вопросы

возможный дубликат элемента Fill SVG path с фоновым изображением

Tony · Accepted Answer · 2013-12-21T05-50-00.000Z

Я исправил твою скрипку:

Я заменил ненужные вызовы setAttributeNS с помощью setAttribute и добавил важный вызов setAttributeNS:

var circle = $('circle');

var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute( "id", "img1");
pattern.setAttribute( "patternUnits", "userSpaceOnUse");
pattern.setAttribute("height", "100");
pattern.setAttribute("width", "100");
var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "0");
image.setAttribute("y", "0");
image.setAttribute("height", "100");
image.setAttribute("width", "100");
image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", 
                     "http://www.abcteach.com/free/c/circlergb.jpg");

pattern.appendChild(image);
defs.appendChild(pattern);
$(defs).insertBefore(circle);

Большое спасибо за ваш ответ. Как выровнять изображение точно по центру, хотя значения x и y равны 0 ??. В моем примере для выравнивания изображения по центру круга мне нужно изменить значения x и y.
Забудем упомянуть, что я изменил значение атрибутов изображения height и width на 100.