SVG => znacznik

Składnia

<marker viewBox = „ xy szerokość wysokość ” refX = „ xoffset ” refY = „ yoffset ” orient = „ orientacja ” ... parametry opcjonalne >
... elementy rysujące znacznik ...
</marker >
< elementname marker-start = "url (# markerid )" /> stosuje marker na początku elementu
< elementname marker-mid = "url (# markerid )" /> stosuje marker na środku segmentu elementu
< elementname marker-end = "url (# markerid )" /> stosuje marker na końcu elementu
Markery można stosować do elementów <line> , <polyline> , <polygon> i <path>

Parametry

Parametr	Detale
viewBox	Określa system jednostek elementów rysujących znacznik
refX	Odległość osi x układu współrzędnych do rysowania znacznika powinna być odsunięta od domyślnego punktu rysowania. Domyślnie 0.
refY	Odległość osi Y układu współrzędnych do rysowania znacznika powinna być odsunięta od domyślnego punktu rysowania. Domyślnie 0.
Orient	Wartości są `auto` lub `angle in degrees` i określa obrót zastosowany do znacznika. Jest stosowany po dokonaniu wszystkich innych korekt współrzędnych (viewBox, preserveAspectRaio i refX, refY). Domyślnie 0. Obliczanie kąta dla `auto` jest skomplikowane - zobacz specyfikację SVG, aby uzyskać szczegółowe informacje.
markerUnits	`strokeWidth` lub `userSpaceOnUse` . Domyślnie to `strokeWidth` .
markerWidth	Szerokość znacznika w znaczniku Jednostki. Domyślnie 3.
markerHeight	Wysokość znacznika w znaczniku Jednostki. Domyślnie 3

Uwagi

Skrypty: renderowane elementy znaczników nie są odsłonięte w DOM, więc nie można dopasować właściwości lub elementów dla określonych renderowanych znaczników (chociaż można całkowicie skrypty zdefiniowanego elementu znacznika).

Właściwość overflow elementu znacznika jest automatycznie ustawiana na hidden . Właśnie to przycina każdy rysunek, który przepełnia płytkę znacznika. Można to wyraźnie ustawić jako visible w CSS. Od lipca 2016 r. Chrome nie obsługuje znaczników z overflow: visible - ale obejściem tego problemu jest ustawienie filtra na elemencie znacznika - który wydaje się wyłączać wycinanie przepełnienia.

Filtry można stosować do elementów w obrębie znacznika. Chociaż nie jest to wyraźnie dozwolone w specyfikacji, filtry również wydają się działać, gdy są określone w samym elemencie znacznika.

Aby uzyskać więcej informacji na temat elementu znacznika, zobacz sekcję znacznika w specyfikacji SVG 1.1 .

Podstawowy marker

Jest to przykład znacznika końcowego określonego minimalną liczbą parametrów. Zauważ, że kolor obrysu oryginalnego elementu nie jest dziedziczony przez marker.

<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>

Wpływ alternatywnych wartości dla refX, refY i orient

refX osi do rysowania znacznika określone przez refX i refY są stosowane przed obrotem określonym przez parametr orient . Poniżej możesz zobaczyć efekty różnych kombinacji orient i refX , refY aby to zilustrować.

<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>

Wpływ alternatywnych wartości dla markerUnits, markerWidth, markerHeight

Domyślnym znacznikiem rysunku jest użycie szerokości obrysu elementu wywołującego, ale można jawnie określić, że znaczniki mają być rysowane za pomocą systemu jednostek dla elementu, do którego stosuje się znacznik, określając markerUnits="userSpaceOnUse" . Znaczniki są rysowane w polu 3x3 markerUnits (3 szerokości uderzeń, jeśli markerUnits nie są określone). Ale szerokość i wysokość pola można jawnie określić za pomocą markerHeight i markerWidth . Zobacz poniżej efekty różnych kombinacji markerUnits , markerHeight i 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>

Znaczniki początkowe, środkowe i końcowe na elementach linii, polilinii, wielokąta i ścieżki

Elementy mogą określać oddzielnie znacznik początkowy, środkowy i końcowy. Poniżej znajdują się przykłady znaczników początkowego, środkowego i końcowego dla wszystkich elementów, które można oznaczyć. Pamiętaj, że Chrome nie oblicza obecnie (lipiec 2016 r.) Poprawnej automatycznej orientacji znaczników początku i końca wielokątów ( błąd nr 633012 ), a także nie umieszcza poprawnie znaczników środkowych segmentów ścieżki łuku ( błąd nr 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

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

SVG
znacznik

Szukaj…