SVG => маркер

Синтаксис

<marker viewBox = " xy width height " refX = " xoffset " refY = " yoffset " orient = " orientation " ... необязательные параметры >
... элементы рисования маркера ...
</marker >
< elementname marker-start = "url (# markerid )" /> применяет маркер к началу элемента
< elementname marker-mid = "url (# markerid )" /> применяет маркер к середине сегмента элемента
< elementname marker-end = "url (# markerid )" /> применяет маркер к концу элемента
Маркеры могут применяться к элементам <line> , <polyline> , <polygon> и <path>

параметры

параметр	подробности
Viewbox	Указывает систему единиц для элементов, которые рисуют маркер
REFx	Расстояние оси x системы координат для рисования маркера должно быть смещено от точки рисования по умолчанию. По умолчанию 0.
refY	Расстояние оси y системы координат для рисования маркера должно быть смещено от точки рисования по умолчанию. По умолчанию 0.
восток	Значения являются `auto` или `angle in degrees` и указывают вращение, применяемое к маркеру. Он применяется после всех других корректировок координат (viewBox, preserveAspectRaio и refX, refY). Значение по умолчанию 0. Расчет угла для `auto` является сложным - подробности см. В спецификации SVG.
markerUnits	`strokeWidth` или `userSpaceOnUse` . По умолчанию используется значение `strokeWidth` .
markerWidth	Ширина маркера в маркерах. По умолчанию 3.
markerHeight	Высота маркера в маркерах. По умолчанию 3

замечания

Сценарии: отображаемые маркерные элементы не отображаются в DOM, поэтому невозможно настроить свойства или элементы для определенных отображаемых маркеров (хотя вполне возможно скриптировать определенный элемент маркера).

Свойство overflow элемента маркера автоматически устанавливается в hidden . Это то, что зажимает любой чертеж, который переполняет маркерную плитку. Это может быть явно установлено visible в CSS. По состоянию на июль 2016 года Chrome не поддерживает маркеры с overflow: visible - но обходным путем является установка фильтра на элемент маркера, который, как представляется, отключает отсечение переполнения.

Фильтры могут применяться к элементам маркера. Хотя явно не разрешено в спецификации, фильтры также работают, если они указаны в самом элементе маркера.

Более подробную информацию о элементе маркера см. В разделе маркера в спецификации SVG 1.1 .

Основной маркер

Это пример конечного маркера, заданного с минимальным количеством параметров. Обратите внимание, что цвет штриха исходного элемента не наследуется маркером.

<svg width="800px" height="600px">
<defs>
      <marker id="examplemarker"
        viewBox="0 0 10 10" 
        refX="0" refY="5" 
        orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
  </defs>
  
  <line x1="20" y1="20" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#examplemarker)" />
</svg>

Эффекты альтернативных значений refX, refY и orient

refX смещения для рисования маркера, заданные refX и refY , применяются до поворота, заданного параметром orient . Ниже вы можете увидеть эффекты различных комбинаций orient и refX , refY чтобы проиллюстрировать это.

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
  
  <text x="20" y="150"> refX,Y  (0,5) orient (auto) </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
  
    <text x="220" y="150"> refX,Y  (0,0) orient (0) </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
  
      <text x="20" y="390"> refX,Y  (20,20) orient (0) </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
  
      <text x="220" y="390"> refX,Y  (20,20) orient (180) </text>
</svg>

Эффекты альтернативных значений для маркеровUnits, markerWidth, markerHeight

По умолчанию для рисования маркеров используется ширина штриха вызывающего элемента, но вы можете явно указать, что маркеры будут рисоваться с использованием единичной системы для элемента, к которому применяется маркер, указав markerUnits="userSpaceOnUse" . Маркеры вставляются в поле 3x3 markerUnits (3 строковых интервала, если маркерные узлы не указаны). Но ширину и высоту окна можно явно указать с помощью markerHeight и markerWidth . Ниже приведены эффекты различных комбинаций markerUnits , markerHeight и markerWidth .

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />     
    <text x="20" y="150"> markerUnits = strokeWidth </text>
    <text x="20" y="170"> markerWidth|Height = 1 </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />      
    <text x="250" y="150"> markerUnits = strokeWidth </text>
    <text x="250" y="170"> markerWidth|Height = 4 </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />      
      <text x="20" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="20" y="410"> markerWidth|Height = 15 </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />      
      <text x="250" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>

Стартовые, средние и конечные маркеры в линиях, полилинии, полигонах и элементах пути

Элементы могут указывать маркеры начала, середины и конца отдельно. Ниже приведены примеры начальных, средних и конечных маркеров для всех элементов, которые могут быть отмечены. Обратите внимание, что Chrome в настоящее время (июль 2016 г.) не рассчитывает автоматическую ориентацию для маркеров начала и конца для полигонов ( ошибка # 633012 ), а также неправильно размещает средние маркеры для сегментов дуги ( ошибка # 583097 )

<svg width="800px" height="600px">
<defs>
      <marker id="red-chevron"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
      </marker>

      <marker id="black-arrow"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
         <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>

      <marker id="red-circle"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <circle fill="red" cx="5" cy="5" r="5" />
      </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
  <text x="20" y="150"> line: marker-mid not applied</text>
  
  <polyline  points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
    <text x="250" y="150"> polyline </text>
   
  <polygon  points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
   <text x="20" y="390"> polygon: end/start overlap </text>
      
  <path d="M250,350 l 25,-25 
        a15,5 -16 0,1 10,-15 l 20,-5 
        a15,10 -16 0,1 10,-15 l 20,-5 
        a15,25 -16 0,1 10,-15 l 20,-5 
        a15,35 -16 0,1 10,-15 l 20,-5"
        fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)"  />
      <text x="250" y="390"> path with arc segments </text>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

SVG
маркер

Поиск…