Образ填充 SVG

SVG шаблоны заливки используются для заливки форм с помощью шаблонов, состоящих из изображений. Этот шаблон может состоять из SVG изображений (форм) или bitmap изображений. SVG шаблоны заливки выглядят так, как вы привыкли к ним в Photoshop и другим аналогичным программам, и называются "тюлем".

Пример шаблона заливки

Это пример простого шаблона заливки SVG:

<svg　width="500"　height="150">
　　　　<defs>
　　　　　　　　<pattern　id="pattern1"　x="10"　y="10"　width="20"　height="20"　patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"　style="stroke:　#000000;　fill:　url(#pattern1);"></rect>
</svg>

Сначала, в элементе <defs> определите элемент <pattern>. Шаблон содержит элемент circle. Этот элемент circle будет использоваться в качестве шаблона заливки.

во-вторых, в атрибуте CSS<rect>объявите элементfillэлемент, который ссылается<pattern>егоstyleэлемента ID.

Во-вторых, объявите элемент <rect>, который ссылается на идентификатор стиля в атрибуте fill CSS, определяющем его.

Эффект изображения после выполнения:

Обратите внимание, как круг, определенный в <pattern>элементе, используется для заливки прямоугольника. Также обратите внимание, как круги повторяются слева направо и сверху вниз.

X, Y, ширина и высота

атрибуты x и y <pattern>элемента определяют расстояние начала шаблона в形状е <pattern>элемента.

<pattern>элемента атрибуты width и height определяют ширину и высоту шаблона.

Это пример, начинающийся с начала, и которыйxиyустановлено значение 0:

<svg　width="500"　height="150">
　　　　<defs>
　　　　　　　　<pattern　id="pattern2"
　　　　　　　　　　　　　　　　　x="0"　y="0"　width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse">
　　　　　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke:　#000000;　fill:　url(#pattern2);"　/>
</svg>

Эффект изображения после выполнения:

Обратите внимание, как fill теперь начинается от середины круга (вверху и слева от прямоугольника). Создавая свои own fills, вы будете использоватьxиyзначения атрибутов для достижения необходимого эффекта.

widthиheightатрибуты устанавливают ширину и высоту fills.

В предыдущем примереwidth,heightОни все установлены в 20, то есть диаметр круга. Таким образом, круги повторяются一遍 за一遍, без пробелов между ними.

В этом примере, width (ширина) fill установлена в 25, а не 20. Обратите внимание, что теперь между горизонтальными кругами есть интервал в 5 пикселей.

Это также примерheightПример с установкой в 25:

Вот тот же пример, но с x и y установлены в 10 (центр круга в элементе <pattern>):

Теперь, fill начинается с целого круга, но есть излишек вертикального и горизонтального пространства.

Nested fills

Можете использовать nested fills для того, чтобы fill был сделан с использованием другого fill. Вот пример, где прямоугольник использует круг в качестве fill, а внутри круга используется прямоугольник в качестве fill.

<svg　width="500"　height="150">　　　　
<defs>　　　　
<pattern　id="innerPattern"　　　　
x="3"　y="3"　width="9"　height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect　x="0"　y="0"　width="6"　height="6"　　　　
style="stroke:　none;　fill:　#ff0000;"　/>　　　　
</pattern>　　　　
<pattern　id="outerPattern"　　　　
x="12"　y="12"　width="25"　height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　#0000ff;　fill:　url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#outerPattern);"　/>　　　　
</svg>

Эффект изображения после выполнения:

Как вы видите, внешняя прямоугольная область заполнена кругом, а круг заполнен прямоугольником.

Преобразование fills

Можете использовать стандартные функции преобразования SVG для изменения fills. Вы можете это сделать с помощью атрибута patternTransform. Вот пример преобразования SVG fills:

<svg　width="500"　height="150">　　　　
<defs>　　　　
<pattern　id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

Этот пример определяет простую图案, который перед использованием в качестве шаблона наполнения rotates на 35 градусов. Эффект изображения после выполнения: