Beispiel:SVG-marker-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style> 
.poly {
	fill: none;
	stroke: steelBlue;
	stroke-width: 2;
	marker: url(#markerPfeil);
   marker-start: url(#markerAnfang);
}

.poly:nth-of-type(2) {
   marker: url(#markerPfeilAuto); 
   marker-start: url(#markerAnfang);    
}

marker,
marker path {
	fill: gold;
	stroke: #000;
	stroke-width: 1;
}

text { font-family: monospace; font-size: 16px; } 

 </style>
 <title>Markierungen - 3</title>

</head>

<body>

marker orient="auto"

<svg viewBox="0 0 700 550">

<defs> <marker id="markerAnfang" markerWidth="6" markerHeight="6" refX="3" refY="3"> <rect x=".5" y=".5" width="5" height="5" /> </marker> <marker id="markerPfeil" markerWidth="130" markerHeight="16" refX="3" refY="3"> <path d="M1,.5 v5 l6,-3z" /> </marker> <marker id="markerPfeilAuto" markerWidth="13" markerHeight="13" refX="3" refY="3" orient="auto"> <path d="M1,.5 v5 l6,-3z" /> </marker> 

   </defs>
   <path class="poly" d="M20,10 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
         style="marker: url(#markerPfeil); marker-start: url(#markerAnfang);"
          />

<text x="50" y="130">orient="0" (Standardwert)</text> <path class="poly" d="M20,200 v100 h100 m30,50 c100,-140 150,140 250,0 c100,-140 150,140 250,0" /> <text x="50" y="320">orient="auto"</text> 

 </svg>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-marker-3.html&oldid=99777“