SVG => markeerstift

Syntaxis

<marker viewBox = " xy width height " refX = " xoffset " refY = " yoffset " orient = " orientatie " ... optionele parameters >
... elementen die de marker tekenen ...
</marker >
< elementname marker-start = "url (# markerid )" /> past een marker toe op het begin van een element
< elementname marker-mid = "url (# markerid )" /> past een marker toe op het midden van een segment van een element
< elementname marker-end = "url (# markerid )" /> past een marker toe op het einde van een element
Markeringen kunnen worden toegepast op de elementen <line> , <polyline> , <polygon> en <path>

parameters

Parameter	Details
Viewbox	Hiermee geeft u het eenheidssysteem op voor de elementen die de markering tekenen
reFX	Afstand van de x-as van het coördinatensysteem voor het tekenen van de markering moet worden verschoven ten opzichte van het standaard tekenpunt. Standaard ingesteld op 0.
refY	Afstand van de y-as van het coördinatensysteem voor het tekenen van de markering moet worden verschoven ten opzichte van het standaard tekenpunt. Standaard ingesteld op 0.
oriënteren	Waarden zijn `auto` of `angle in degrees` en geeft de rotatie aan die op de marker wordt toegepast. Het wordt toegepast nadat alle andere coördinaataanpassingen zijn aangebracht (viewBox, preserveAspectRaio en refX, refY). Standaard is 0. De berekening van de hoek voor `auto` is complex - zie de SVG-specificatie voor meer informatie.
markerUnits	`strokeWidth` of `userSpaceOnUse` . Standaard ingesteld op `strokeWidth` .
markerWidth	Breedte van de marker in markerUnits. Standaard ingesteld op 3.
markerHeight	Hoogte van de marker in marker Units. Standaard ingesteld op 3

Opmerkingen

Scripting: gerenderde markerelementen worden niet weergegeven in de DOM, dus het is onmogelijk om eigenschappen of elementen aan te passen voor specifieke gerenderde markers (hoewel het volledig mogelijk is om het gedefinieerde markerelement te scripten).

De overflow van het marker-element wordt automatisch ingesteld op hidden . Dit is wat elke tekening knipt die over de tegel van de markering loopt. Dit kan expliciet worden ingesteld op visible in CSS. Vanaf juli 2016 ondersteunt Chrome geen markeringen met overflow: visible - maar een oplossing is om een filter op het marker-element in te stellen - die het overflowknippen lijkt uit te schakelen.

Filters kunnen worden toegepast op elementen binnen een marker. Hoewel dit niet expliciet is toegestaan in de specificatie, lijken filters ook te werken wanneer ze op het marker-element zelf zijn opgegeven.

Zie het markeringsgedeelte in de SVG 1.1-specificatie voor meer informatie over het markeerelement .

Basic marker

Dit is een voorbeeld van een eindmarkering die is opgegeven met een minimaal aantal parameters. Merk op dat de lijnkleur van het originele element niet wordt overgenomen door de 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>

Effecten van alternatieve waarden voor refX, refY en orient

De as-offsets voor het tekenen van de markering die zijn opgegeven met refX en refY worden toegepast vóór de rotatie die is opgegeven door de parameter orient . Hieronder ziet u de effecten van verschillende combinaties van orient en refX , refY om dit te illustreren.

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

Effecten van alternatieve waarden voor markerUnits, markerWidth, markerHeight

De standaardinstelling voor het tekenen van markeringen is het gebruik van de lijndikte van het aanroepelement, maar u kunt expliciet opgeven dat markeringen worden getekend met behulp van het eenheidssysteem voor het element waarop de markering wordt toegepast door markerUnits="userSpaceOnUse" . Markeringen worden in een vak van 3x3 markerUnits getrokken (3 strokbreedten als markerUnits niet zijn opgegeven). Maar de breedte en hoogte van het vak kunnen expliciet worden opgegeven met markerHeight en markerWidth . Zie hieronder voor de effecten van verschillende combinaties van markerUnits , markerHeight en 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>

Start-, midden- en eindmarkeringen op lijn-, polylijn-, polygoon- en padelementen

Elementen kunnen start-, midden- en eindmarkeringen afzonderlijk specificeren. Hieronder staan voorbeelden van begin-, midden- en eindmarkeringen voor alle elementen die kunnen worden gemarkeerd. Houdt u er rekening mee dat Chrome niet momenteel (juli 2016) berekenen Automatische oriëntatie correct voor begin en einde markers voor polygonen ( bug # 633.012 ), en ook niet de juiste plek midden markers voor segmenten lijntraject ( bug # 583.097 )

<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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

SVG
markeerstift

Zoeken…