Учебники

SVG — Узоры

Январь 15, 2019

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», значения представляют значения в долях или процентах от ограничительной рамки на ссылочном элементе на месте во время использования элемента ‘pattern’. По умолчанию используется userSpaceOnUse.
3 x — координата оси x ограничительной рамки шаблона. По умолчанию 0.
4 y — координата оси y рамки, ограничивающей шаблон. По умолчанию 0.
5 ширина — ширина ограничительной рамки рисунка. По умолчанию 0.
6 высота — высота ограничительной рамки рисунка. По умолчанию 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 шаблона, чтобы заполнить прямоугольник шаблоном, созданным ранее.

Один элемент <pattern> определен как pattern1.

В шаблоне определяется окно просмотра и определяется путь, который должен использоваться в качестве шаблона.

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

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

53
Share: