Depot43-Unterlagen - SVG Attribute

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG Attribute</title>
    <style>
	svg {
		max-width:400px;
	}
	rect {
		stroke:grey;
  		stroke-width:2 ;
	 }
	g {
		opacity:0.7;
	}
	circle {
		stroke:blue;
  		stroke-width:6 ;
	}
	path {
	    	stroke: grey!important;
		stroke-width:9!important ;
	}
    </style>
</head>
    <body>
	<svg width="100%" height="100%" viewbox="0 0 224 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> 
		<rect id="ArtBoard1" x="0" y="0" width="223.964" height="225.444" style="fill:none;"> 
		</rect>  
		<g>  
			<circle cx="113.905" cy="111.538" r="100" style="fill:#f00;"></circle>  
			<circle cx="111.982" cy="111.538" r="54.504" style="fill:#ebebeb;"></circle>  
		</g>  
		<path d="M76.036,112.722c0,0 2.662,-37.278 23.076,-37.278c20.415,0 -5.029,31.065 16.568,35.503c21.598,4.438 32.249,-35.503 32.249,-35.503" style="fill:none;stroke:#000;stroke-width:5px;"> </path> 
		<rect x="76.036" y="129.586" width="71.893" height="12.426" style="fill:#ebebeb;stroke:#000;stroke-width:5px;"> 
		</rect>  
	</svg> 
    </body>
</html>


 

            

Hinweis

Download: rot-attribute.svg

Download: rot-attribute.afdesign (Affinity Designer)

Die in einer SVG-Datei verwendeten Attribute:

svg > Das umgebende Markup-Element
rect > ein Rechteck, üblicherweise steht das umgebende "rect"-Element für:

Dokumentgrösse (alle Programme) > oft dient dieses Element nicht der Anzeige im HTML
Zeichenfläche (Adobe Illustrator)
AirBoard (Affinity Designer)
Bühne (Adobe Animate)

rect > Rechteck
circle > Kreis
path > Pfad
g > Gruppe