Beispiel:SVG-vector-effect.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
path {
fill: #dfac20;
fill-opacity: 0.5;
stroke-width: 2;
stroke-linecap: round;
}
</style>
<title>vector-effect</title>
</head>
<body>
<h1>SVG: vector-effect</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400">
<defs>
<path vector-effect="non-scaling-stroke" id="p1" d="M-0.01,32.25C-0.31,56.32 -7.14,17.67 -11.9,26.72S-11.56,11.16 -22.29,20.08S-13.32,4.85 -31.03,10.06S-22.31,-1.57 -48.11,-5.06S-17.25,-9.16 -41.88,-24.21S-13.58,-17.37 -24.69,-33.97S-5.25,-21.09 -8.64,-40.72S3.36,-19.08 9.28,-43.65S11.72,-17.36 25.79,-35.49S13.89,-8.68 35.06,-20.27S21.99,-3.1 30.95,-3.26S8.33,2.39 35.67,11.57S17.38,14.57 32.06,28.84S4.21,8.64 15.73,35.28S0.29,8.18 -0.01,32.25z"/>
<path id="p2" d="M-0.01,32.25C-0.31,56.32 -7.14,17.67 -11.9,26.72S-11.56,11.16 -22.29,20.08S-13.32,4.85 -31.03,10.06S-22.31,-1.57 -48.11,-5.06S-17.25,-9.16 -41.88,-24.21S-13.58,-17.37 -24.69,-33.97S-5.25,-21.09 -8.64,-40.72S3.36,-19.08 9.28,-43.65S11.72,-17.36 25.79,-35.49S13.89,-8.68 35.06,-20.27S21.99,-3.1 30.95,-3.26S8.33,2.39 35.67,11.57S17.38,14.57 32.06,28.84S4.21,8.64 15.73,35.28S0.29,8.18 -0.01,32.25z"/>
</defs>
<g stroke="#337599">
<use href="#p1" x="100" y="100" />
<use href="#p1" x="120" y="100" transform="scale(2)" />
<use href="#p1" x="200" y="-300" transform="scale(0.4 -0.6)" />
<use href="#p1" x="-650" y="-200" transform="scale(-0.4) skewX(-30)" />
</g>
<g stroke="#c82f04">
<use href="#p2" x="100" y="260" />
<use href="#p2" x="220" y="100" transform="translate(-300,-150) scale(3.7)" />
<use href="#p2" x="900" y="-100" transform="translate(0,-30) scale(0.4 -0.8)" />
<use href="#p2" x="-720" y="200" transform="scale(-0.4) skewY(30)" />
</g>
</svg>
<p>Beim Skalieren vergrößert sich die Form und entsprechend auch die Stärke der Randlinie.<br>Die Formen mit dem blauen Rand haben immer die gleiche Randstärke - dank <code>vector-effect="non-scaling-stroke"</code></p>
</body>
</html>
