Как бы я переместить шаблон SVG с элементом

Question

Я создал шаблон svg, увиденный здесь:

<pattern id="t" height="20" width="20" patternUnits="userSpaceOnUse" overflow="visible">
    <ellipse cx="0" cy="0" rx="20" ry="20" fill="white"/>
    <ellipse cx="5" cy="5" rx="15" ry="15" fill="yellow"/>
    <ellipse cx="10" cy="10" rx="10" ry="10" fill="blue"/>
    <ellipse cx="15" cy="15" rx="5" ry="5" fill="red"/>
</pattern>

Затем в своем сценарии я создал эллипс, который использует шаблон. Проблема в том, что когда я двигаю эллипс, рисунок остается за ним, а не движется с эллипсом.

Как мне настроить шаблон, чтобы остаться с элементом?

Answer 1

Я считаю, что вам нужно изменить patternUnits на "objectBoundingBox" против userSpaceOnUse. Это должно исправить вещи для вас.

Обновить:

Этот ответ был неправильным - patternUnits не должен влиять на структуру шаблона, а только на его размеры (единицы пользовательского пространства или единицы ограничивающего прямоугольника). patternContentUnits - это атрибут, который вы хотите установить в "objectBoundingBox" - обратите внимание, что тогда он будет масштабировать ваш шаблон, если вы измените размер ограничительной рамки. Если вы не хотите, чтобы это происходило, тогда вам нужно использовать атрибут viewbox в вашем шаблоне - что, вероятно, является правильным способом получить результат, который вы, вероятно, ищете (шаблон фиксированного размера, расположенный относительно его ограничительной рамки)

(Также обратите внимание, что установка переполнения на видимые результаты приводит к "неопределенному" рендерингу в соответствии со спецификацией, а не чем-то, что вы хотите сделать)

Answer 2

Вам нужно использовать patternContentUnits="objectBoundingBox", нажмите на прямоугольник в этом примере, чтобы увидеть: http://jsfiddle.net/longsonr/x8nkz/

Answer 3

Дубликат Как сделать так, чтобы заливка рисунка SVG перемещалась вместе с объектом?

решается с помощью вложенного документа SVG

// svg.js + svg.draggable.js

// create canvas
var draw = SVG().size(200, 200).addTo('#canvas')

// pattern of checkerboard
var patt = draw.pattern(20, 20)
patt.rect(20, 20).fill({color: '#fff'})
patt.rect(10, 10)
patt.rect(10, 10).move(10, 10)

// nested svg document
var nested = draw.nested()

// rect + pattern
nested.rect(80, 80).attr({
    fill: patt
})

// drag on
nested.draggable()