SVG => marcatore

Sintassi

<marker viewBox = " xy width height " refX = " xoffset " refY = " yoffset " orient = " orientation " ... parametri opzionali >
... elementi che disegnano il marker ...
</marker >
< elementname marker-start = "url (# markerid )" /> applica un marker all'inizio di un elemento
< elementname marker-mid = "url (# markerid )" /> applica un marcatore al centro di un segmento di un elemento
< elementname marker-end = "url (# markerid )" /> applica un marcatore alla fine di un elemento
I marker possono essere applicati agli elementi <line> , <polyline> , <polygon> e <path>

Parametri

Parametro	Dettagli
viewBox	Specifica il sistema di unità per gli elementi che disegnano il marcatore
reFX	Distanza dall'asse x del sistema di coordinate per disegnare il marcatore deve essere spostato rispetto al punto di disegno predefinito. Il valore predefinito è 0.
refY	Distanza dall'asse y del sistema di coordinate per disegnare il marcatore deve essere spostato rispetto al punto di disegno predefinito. Il valore predefinito è 0.
Oriente	I valori sono `auto` o `angle in degrees` e specifica la rotazione applicata al marker. Viene applicato dopo che sono state eseguite tutte le altre regolazioni delle coordinate (viewBox, preserveAspectRaio e refX, refY). Il valore predefinito è 0. Il calcolo dell'angolo per `auto` è complesso: vedere le specifiche SVG per i dettagli.
markerUnits	`strokeWidth` o `userSpaceOnUse` . Impostazioni predefinite per `strokeWidth` .
markerWidth	Larghezza dell'indicatore in markerUnits. Il valore predefinito è 3.
markerHeight	Altezza del marker in markerUnits. Il valore predefinito è 3

Osservazioni

Scripting: gli elementi dei marker renderizzati non sono esposti nel DOM, quindi è impossibile regolare le proprietà o gli elementi per specifici indicatori di rendering (anche se è completamente possibile scrivere l'elemento marker definito).

La proprietà di overflow dell'elemento marker viene automaticamente impostata su hidden . Questo è ciò che taglia qualsiasi disegno che trabocca dalla tessera marcatore. Questo può essere esplicitamente impostato su visible in CSS. A partire da luglio 2016, Chrome non supporta i marcatori con overflow: visible - ma una soluzione alternativa è impostare un filtro sull'elemento marker, che sembra disabilitare il clipping overflow.

I filtri possono essere applicati agli elementi all'interno di un marker. Anche se non sono esplicitamente permessi nelle specifiche, i filtri sembrano funzionare anche se specificati sull'elemento marker stesso.

Per maggiori dettagli sull'elemento marcatore, vedere la sezione marcatori nelle specifiche SVG 1.1 .

Marcatore di base

Questo è un esempio di un marcatore finale specificato con un numero minimo di parametri. Si noti che il colore del tratto dell'elemento originale non è ereditato dal marcatore.

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

Effetti di valori alternativi per refX, refY e orient

Gli offset dell'asse per disegnare il marker che sono specificati da refX e refY vengono applicati prima della rotazione specificata dal parametro orient . Qui sotto puoi vedere gli effetti di varie combinazioni di orient e refX , fare refY a questo.

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

Effetti di valori alternativi per markerUnits, markerWidth, markerHeight

L'impostazione predefinita per gli indicatori di disegno consiste nell'utilizzare la larghezza del tratto dell'elemento chiamante, ma è possibile specificare esplicitamente che i marcatori vengano disegnati utilizzando il sistema di unità per l'elemento al quale il marcatore viene applicato specificando markerUnits="userSpaceOnUse" . I marker sono disegnati in una casella 3x3 markerUnits (3 strokewidths se markerUnits non è specificato). Ma la larghezza e l'altezza della scatola possono essere specificate esplicitamente con markerHeight e markerWidth . Vedi sotto per gli effetti di varie combinazioni di markerUnits , markerHeight e 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>

Marcatori di inizio, metà e fine in linea, polilinea, poligono e percorso

Gli elementi possono specificare separatamente i marcatori di inizio, metà e fine. Di seguito sono riportati alcuni esempi di indicatori di inizio, metà e fine per tutti gli elementi che possono essere contrassegnati. Tieni presente che Chrome al momento (luglio 2016) non calcola correttamente l'orientamento automatico per i marker di inizio e fine per i poligoni ( bug # 633012 ) e inoltre non colloca correttamente i marker medi per i segmenti del tracciato dell'arco ( bug # 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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

SVG
marcatore

Ricerca…