SVG => markör

Syntax

<marker markörvyBox = " xy breddhöjd" refX = " xoffset " refY = " yoffset " orient = " orientering " ... valbara parametrar >
... element som drar markören ...
</marker >
< elementname marker-start = "url (# markerid )" /> tillämpar en markör i början av ett element
< elementname marker-mid = "url (# markerid )" /> tillämpar en markör i mitten av ett segment av ett element
< elementname marker-end = "url (# markerid )" /> tillämpar en markör i slutet av ett element
Markörer kan tillämpas på elementen <line> , <polyline> , <polygon> och <path>

parametrar

Parameter	detaljer
viewBox	Anger enhetssystemet för elementen som drar markören
refX	Avståndet till x-axeln för koordinatsystemet för att rita markören bör förskjutas från standardritningspunkten. Standardvärdet till 0.
refY	Avståndet y-axeln för koordinatsystemet för att rita markören bör förskjutas från standardritningspunkten. Standardvärdet till 0.
orient	Värdena är `auto` eller `angle in degrees` och anger rotationen som appliceras på markören. Den tillämpas efter att alla andra koordinatjusteringar har gjorts (viewBox, preserveAspectRaio och refX, refY). Standardvärdet till 0. Beräkning av vinkeln för `auto` är komplex - se SVG-specifikationen för detaljer.
markerUnits	`strokeWidth` eller `userSpaceOnUse` . Standardvärde för `strokeWidth` .
markerWidth	Markörens bredd i markörenheter. Standardvärdet till 3.
markerHeight	Markörens höjd i markörenheter. Standardvärdet till 3

Anmärkningar

Skript: renderade markörelement exponeras inte i DOM, så det är omöjligt att justera egenskaper eller element för specifika återgivna markörer (även om det är fullt möjligt att skripta det definierade markörelementet).

overflow ställs automatiskt in på hidden . Det här är vad som klipper alla ritningar som flyter över markörskivan. Detta kan uttryckligen ställas in på visible i CSS. Från och med juli 2016 stöder Chrome inte markörer med overflow: visible - men en lösning är att ställa in ett filter på markörelementet - vilket verkar inaktivera överflödesklippningen.

Filter kan appliceras på element i en markör. Även om det inte är uttryckligen tillåtet i specifikationen, verkar filter också fungera när de anges i markörelementet självt.

För mer information om markörelementet, se markörsektionen i SVG 1.1-specifikationen .

Grundläggande markör

Detta är ett exempel på en slutmarkör specificerad med ett minimalt antal parametrar. Observera att slagfärgen för det ursprungliga elementet inte ärvs av markören.

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

Effekter av alternativa värden för refX, refY och orient

Axelförskjutningarna för att rita markören som specificeras av refX och refY tillämpas före rotationen som anges av orient . Nedan kan du se effekterna av olika kombinationer av orient och refX , refY att illustrera detta.

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

Effekter av alternativa värden för markerUnits, markerWidth, markerHeight

Standard för ritning av markörer är att använda slagbredden för det anropande elementet, men du kan uttryckligen ange att markörer ska ritas med enhetssystemet för det element markören appliceras på genom att ange markerUnits="userSpaceOnUse" . Markörer dras in i en 3x3 markörenhet-ruta (3 slagbredd om markörenheter inte anges). Men rutans bredd och höjd kan uttryckligen anges med markerHeight och markerWidth . Se nedan för effekterna av olika kombinationer av markerUnits , markerHeight och 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-, mitten- och slutmarkeringar på linje-, polyline-, polygon- och banelement

Element kan ange start-, mitten- och slutmarkeringar separat. Nedan följer exempel på start-, mitten- och slutmarkeringar för alla element som kan markeras. Observera att Chrome för närvarande (juli 2016) inte beräknar autoorienteringen korrekt för start- och slutmarkeringar för polygoner ( fel # 633012 ), och inte heller placerar mittmarkeringarna korrekt för bågvägsegment ( bugg # 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

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

SVG
markör

Sök…