Заполнить элемент SVG фоновым изображением со смещением - PullRequest
Новая
       43

Заполнить элемент SVG фоновым изображением со смещением

6 голосов
/ 09 марта 2011

Я хочу сделать что-то подобное этому Заполнить элемент пути SVG фоновым изображением

Однако я хочу сместить / сместить изображение. С помощью CSS это легко сделать, установив background-image и background-position. Как мне это сделать с SVG?

Ответы [ 2 ]

6 голосов
/ 09 марта 2011

Вы можете использовать patternTransform в элементе шаблона для преобразования шаблона;он работает так же, как атрибут transform, с которым вы, возможно, уже знакомы.Подробнее см. в документации .

0 голосов
/ 23 декабря 2016

Вы можете использовать pattern и элемент SVG с атрибутом fill.

Вот пример: вставьте изображение в позицию (10, 10) со смещением (40, 550) и размером (420, 340).Обратите внимание, что вы должны установить правильные значения x / y и transform="translate(-x1 -y2)". 

<p>
  <a href="http://i.imgur.com/09AoLQtr.jpg">Original image</a>
</p>

<svg version="1.1" width="500" height="400" style="background-color: #EEE;">
  <defs>
<pattern id="europe" patternUnits="userSpaceOnUse" 
         width="1456px" height="1094px">
  <image xlink:href="http://i.imgur.com/09AoLQtr.jpg"/>
</pattern>
  </defs>

  <rect fill="url(#europe)" transform="translate(-30 -540)" 
    x="40" y="550" width="420" height="340"/>
</svg>
...