SVG - Шаблоны
SVG использует элемент <pattern> для определения шаблонов. Шаблоны определяются с помощью элемента <pattern> и используются для заливки графических элементов мозаичным способом.
Декларация
Ниже приводится объявление синтаксиса <pattern>элемент. Мы показали только основные атрибуты.
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference to another pattern" >
</pattern>Атрибуты
| Sr.No. | Имя и описание |
|---|---|
| 1 | patternUnits- единицы определения области действия паттернов. Он определяет систему координат для различных значений длины в шаблоне и для атрибутов, определяющих подобласть шаблона. Если patternUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'pattern'. Если patternUnits = "objectBoundingBox", значения представляют значения в долях или процентах ограничивающего прямоугольника на ссылающемся элементе, находящемся на месте во время использования элемента 'pattern'. По умолчанию - userSpaceOnUse. |
| 2 | patternContentUnits- единицы для определения области содержимого паттерна. Он определяет систему координат для различных значений длины в шаблоне и для атрибутов, определяющих подобласть шаблона. Если patternContentUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'pattern'. Если patternContentUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент "шаблон". По умолчанию - userSpaceOnUse. |
| 3 | x- координата по оси X ограничивающего прямоугольника узора. Неисправность - 0. |
| 4 | y- координата по оси Y ограничивающей рамки узора. По умолчанию 0. |
| 5 | width- ширина ограничительной рамки узора. По умолчанию 0. |
| 6 | height- высота ограничивающего прямоугольника рисунка. По умолчанию 0. |
| 7 | preserveAspectRatio - для сохранения соотношения ширины и высоты исходного содержимого. |
| 8 | xlink:href - используется для обозначения другого шаблона. |
пример
testSVG.htm<html>
<title>SVG Pattern</title>
<body>
<h1>Sample SVG Pattern</h1>
<svg width="800" height="800">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 4 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
</pattern>
</defs>
<g>
<text x="30" y="50" >Using Pattern (Triangles): </text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>Один элемент <pattern>, определенный как pattern1.
В шаблоне определяется окно просмотра и определяется путь, который должен использоваться в качестве шаблона.
в элементе rect, в атрибуте fill указывается url шаблона для заполнения прямоугольника шаблоном, созданным ранее.
Вывод
Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра изображения SVG напрямую, без каких-либо плагинов. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.