Шаблоны SVG онлайн урок.


SVG& lt; pattern & gt; Атрибутпозволяет нам определять шаблоны внутри нашей разметки SVG и использовать эти шаблоны какfill. Основной процесс для шаблонов выглядит примерно так:

  • Определить& lt; pattern & gt;внутри SVG
  • Определить фигуры внутри шаблона
  • Использовать фигуры
  • Создать новую фигуру и заполнить ее шаблоном

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

Мы также сохраняем коллекцию этих на CodePen.

# Круговой шаблон

<svg width="100%" height="100%">

<!-- Create mask that we'll use to define a slight gradient -->
<mask maskUnits="userSpaceOnUse" id="fade">
<!-- Here's that slight gradient -->
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset ="0" style="stop-color: #FFFFFF" />
<stop offset ="1" style="stop-color: #000000" />
</linearGradient>
<!-- The canvas for our mask -->
<rect fill="url(#gradient)" width="100%" height="100%" />
</mask>

<!-- Let's define the pattern -->
<!-- The width and height should be double the circle radius we plan to use -->
<pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<!-- Now let's draw the circle -->
<!-- We're going to define the `fill` in the CSS for flexible use -->
<circle mask="url(#fade)" cx="20" cy="20" r="20" />
</pattern>
<!-- The canvas with our applied pattern -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />

</svg>

# Шаблон шахматной доски

<svg width="100%" height="100%">

<!-- Let's define the pattern -->
<!-- The width and height should be double the size of a single checker -->
<pattern id="pattern-checkers" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse" >
<!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->
<!-- We will define the `fill` in the CSS for flexible use -->
<rect class="checker" x="0" width="100" height="100" y="0"/>
<rect class="checker" x="100" width="100" height="100" y="100"/>
</pattern>

<!-- Define the shape that will contain our pattern as the fill -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)" />

</svg>

# Шестиугольник

<svg width="100%" height="100%" >

<!-- Define the pattern -->
<pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">

<!-- Group the hexagon shapes -->
<!-- Each path could have a class for more styling/animating options -->
<!-- We're going to control the fill and stroke in the CSS for flexibility -->
<g id="hexagon">
<path d="M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1 L168-127.1z"/>
<path d="M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C111-222.4,111.5-222.5,112-222.5L112-222.5z"/>
<path d="M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C167-317.7,167.5-317.8,168-317.8L168-317.8z"/>
</g>

</pattern>

<!-- The canvas for our pattern -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hex)" />

</svg>

# Cube Pattern

<svg width="100%" height="100%">

<!-- Define the pattern -->
<pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16">

<!-- Cube code courtest of SVGeneration: http://www.svgeneration.com/recipes/3D-Cubes/ -->
<g id="cube">
<!-- We'll apply the `fill` in the CSS for flexibility -->
<path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
<path class="right-shade" d="M10 0l-5 3v5l5 -3" />
</g>

<!-- Apply the cube shapes -->
<use x="5" y="8" xlink:href="#cube" />
<use x="-5" y="8" xlink:href="#cube" />

</pattern>

<!-- The canvas for our pattern -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)" />

</svg>

# Шаблон Шеврона

<svg width="100%" height="100%"><svg width="100%" height="100%">

<!-- Define the pattern -->
<pattern id="pattern-chevron" x="0" y="0" patternUnits="userSpaceOnUse" width="100" height="180" viewBox="0 0 10 18">

<!-- Group the chevron shapes -->
<g id="chevron">
<!-- Chevron consists of two shapes, a left and a right to form a `v` -->
<!-- We'll apply the `fill` in the CSS for flexibility -->
<path class="left" d="M0 0l5 3v5l-5 -3z" />
<path class="right" d="M10 0l-5 3v5l5 -3" />
</g>

<!-- Apply the shapes -->
<!-- `y="9"` narrows the space between rows -->
<use x="0" y="9" xlink:href="#chevron" />

</pattern>

<!-- The canvas for our pattern -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-chevron)" />

</svg>

Если вы хотите играть в режиме реального времени с различными атрибутами шаблона, чтобы понять, как работает паттерн, попробуйте это: