SVG => Marker

Syntax

<marker viewBox = " xy width height " refX = " xoffset " refY = " yoffset " orient = " orientation " ... optionale Parameter >
... Elemente, die den Marker zeichnen ...
</marker >
< elementname marker-start = "url (# markerid )" /> wendet eine Markierung an den Anfang eines Elements an
< Elementname marker-mid = "url (# markerid )" /> wendet eine Markierung in die Mitte eines Segments eines Elements an
< elementname marker-end = "url (# markerid )" /> wendet eine Markierung am Ende eines Elements an
Markierungen können auf die Elemente <line> , <polyline> , <polygon> und <path> <polygon> werden

Parameter

Parameter	Einzelheiten
viewBox	Gibt das Einheitensystem für die Elemente an, die die Markierung zeichnen
refX	Abstand Die X-Achse des Koordinatensystems zum Zeichnen der Markierung sollte vom Standardzeichnungspunkt versetzt sein. Standardeinstellung ist 0.
refY	Abstand Die y-Achse des Koordinatensystems zum Zeichnen der Markierung sollte vom Standardzeichnungspunkt versetzt sein. Standardeinstellung ist 0.
Orient	Die Werte sind `auto` oder `angle in degrees` und geben die Drehung an, die auf die Markierung angewendet wird. Es wird angewendet, nachdem alle anderen Koordinateneinstellungen vorgenommen wurden (viewBox, preserveAspectRaio und refX, refY). Der Standardwert ist 0. Die Berechnung des Winkels für `auto` ist komplex - Einzelheiten finden Sie in der SVG-Spezifikation.
markerUnits	`strokeWidth` oder `userSpaceOnUse` . `strokeWidth` .
markerWidth	Breite der Markierung in markerUnits. Standardeinstellung ist 3.
markerHeight	Höhe der Markierung in markerUnits. Standardeinstellung ist 3

Bemerkungen

Skripting: Gerenderte Markierungselemente werden im DOM nicht verfügbar gemacht. Es ist daher nicht möglich, Eigenschaften oder Elemente für bestimmte gerenderte Markierungen anzupassen (obwohl das definierte Markierungselement durchaus ein Skript enthalten kann).

Die overflow des Markierungselements wird automatisch auf hidden . Dies ist, was jede Zeichnung ausschneidet, die die Markierungskachel überläuft. Dies kann explizit in CSS visible . Seit Juli 2016 unterstützt Chrome keine Marken mit overflow: visible - aber eine Problemumgehung besteht darin, einen Filter für das Markierungselement festzulegen. Dies scheint das Überlauf-Clipping zu deaktivieren.

Filter können auf Elemente innerhalb einer Markierung angewendet werden. Filter sind zwar nicht ausdrücklich in der Spezifikation zulässig, scheinen jedoch auch zu funktionieren, wenn sie im Markierungselement selbst angegeben werden.

Weitere Informationen zum Markierungselement finden Sie im Markierungsabschnitt der SVG 1.1-Spezifikation .

Grundlegende Markierung

Dies ist ein Beispiel für eine Endemarkierung, die mit einer minimalen Anzahl von Parametern angegeben ist. Beachten Sie, dass die Strichfarbe des ursprünglichen Elements nicht von der Markierung übernommen wird.

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

Auswirkungen alternativer Werte für RefX, RefY und Orient

Die Achsversätze zum Zeichnen der Markierung, die durch refX und refY werden, werden vor der durch den Parameter orient angegebenen Drehung angewendet. Im Folgenden können Sie die Auswirkungen verschiedener Kombinationen von orient und 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>

Auswirkungen alternativer Werte für markerUnits, markerWidth, markerHeight

Die Standardeinstellung für das Zeichnen von Markierungen ist die Verwendung der Strichbreite des aufrufenden Elements. Sie können jedoch explizit angeben, dass Markierungen mit dem Einheitensystem für das Element gezeichnet werden, auf das die Markierung angewendet wird, indem Sie markerUnits="userSpaceOnUse" . Marker werden in ein 3x3 markerUnits-Feld (3 Strokewidths, wenn markerUnits nicht angegeben ist) gezeichnet. Die Breite und Höhe der Box kann jedoch mit markerHeight und markerWidth explizit angegeben werden. markerUnits finden markerHeight die Auswirkungen verschiedener Kombinationen von markerUnits , markerHeight und 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-, Mittel- und Endmarkierungen für Linien-, Polylinien-, Polygon- und Pfadelemente

Elemente können Start-, Mittel- und Endmarkierungen separat angeben. Nachfolgend finden Sie Beispiele für Start-, Mittel- und Endmarkierungen für alle Elemente, die markiert werden können. Beachten Sie, dass Chrome die automatische Ausrichtung für Start- und Endmarkierungen für Polygone ( Fehler Nr. 633012 ) derzeit nicht (Juli 2016) richtig berechnet und die mittleren Marker für Bogenwegabschnitte nicht korrekt platziert ( Fehler 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

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

SVG
Marker

Suche…