Beispiel:SVG-marker-context-fill.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>
.dataline {
	marker: url(#datamarker);
	marker-start:none;
	fill-opacity: 0;
	stroke: currentColor;
	stroke-linejoin: bevel;
	stroke-width: 3;
}
 
.axis {
  color: #999;
  stroke: currentColor;
  stroke-width: 3;
  marker-mid: url(#dot);
  marker-end: url(#arrow);
}

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

svg {
  color: red;
  width: 96%;
  max-height: 550px;
  border: thin dotted #337599;
  }  
  </style>
  <title>context-fill und context-stroke</title>
</head>
 
<body>
  <h1>Markierungen in SVG: context-fill und context-stroke</h1>
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="-100 0 700 450">
	<defs>
		<marker id="arrow" markerWidth="13" markerHeight="13" refX="7" refY="6" orient="auto">
			<path d="M0,2 l8,4 l-8,4" fill="none" stroke="#999" stroke-width="1"/>
		</marker>
		<marker id="dot" markerWidth="3" markerHeight="10" refX="1" refY="3" orient="auto">
			<path d="M0,-3 v9" fill="none" stroke="#999" stroke-width="3"/>
		</marker>	
		<marker id="datamarker" markerWidth="5" markerHeight="5" refX="2" refY="2">
			<circle cx="2" cy="2" r="1.5" stroke-width=".5" fill="context-fill" stroke="context-stroke" />
		</marker>
		<pattern id="lines" patternUnits="userSpaceOnUse" width="20" height="50">
			<path d="M0,1 h20" style="stroke:skyblue; stroke-width:1" />
		</pattern>
</defs>

<rect width="600" height="350" y="50" style="stroke: none; fill: url(#lines);" />  

<path class="axis" d="M0,400 h50 h50 h50 h50 h50 h50 h50 h50 h50 h50 h50"/>  
<path class="axis" d="M0,400 v-50 v-50 v-50 v-50 v-50 v-50 v-50 v-40"/>


<polyline id="dataline-1" class="dataline" style="stroke:#c82f04; fill:pink;" 
points="0,50 100,75 150,125 200,200 250,150 300,175 350,175 350,175 400,150 450,100">              
	<title>Team Red</title>
</polyline>

<polyline id="dataline-2" class="dataline" style="stroke:#337599; fill:skyblue;" 
points="0,200 100,275 150,325 200,100 250,250 300,225 350,375 350,100 400,250 450,275">              
	<title>Team Blue</title>
</polyline>

<polyline id="dataline-3" class="dataline" style="stroke:#dfac20; fill:hsl(43 76% 90%);" 
points="50,400 100,375 150,225 200,220 250,350 300,275 350,275 350,275 400,350 450,300">              
	<title>Team Yellow</title>
</polyline>


</svg>
<p>Die Markierungen übernehmen dank der Werte <code>context-fill</code> und <code>context-stroke</code> die Farben der Polylinien.<br>
Dieses Beispiel funktioniert derzeit (Stand: November 2024) im Chrome, Edge, Opera und Firefox!
<br>Safari und ältere Browser rendern die Markierungen in schwarz!</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-marker-context-fill.html&oldid=99769“