Compréhension simple de SVG

svg

canvasEtsvgLa différence

canvas:

• Canvas - Oui.H5Les nouvelles étiquettes,C'est une toile..UtilisationJavaScriptDessiner une image sur une page web.Canvas.Est rendu pixel par Pixel,Riche en couleurs,Distorsion d'échelle.
• Modifier le dessin Il faut redessiner toute la toile

svg:

• Graphiques vectoriels extensibles(Format d'image non déformé après l'échelle Scalable Vector Graphics)
• svgC'est parDOMFonctionnement pour afficher,svgChaque dessin est un noeud séparé,Pour faciliter la modification des styles.

svg

version:svg Numéro de version de la spécification suivie 1.0 1.1Deux versions
xmlns:DéfinitionsvgNomenclature.
x yIndique les coordonnées de départ widthEtheightIndique la largeur et la hauteur du rectangle Avant de définir la couleur de remplissage Noir par défaut fillDéfinir la couleur de remplissage

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   
        <rect x="30" y="30" width="100" height="100" fill="pink" class="r"/>
    </svg>

svgChemin

M:moveTo Passer à un point de coordonnées
L:lineTo:Tracer une ligne vers un point de coordonnées
Z:closeFermé
stork:Couleur de la ligne
stork-width:Largeur de la ligne

 <path d="M75,20 L100,100,L400,150,Z" fill="pink" stroke="yellow" stroke-width="10"> </path> 
 //  Les majuscules sont absolues   Les minuscules sont relatives   Par rapport aux coordonnées précédentes 
  <path d="M75,20 l50,0,L50,10 Z" fill="" stroke="green" stroke-width=""> </path>

Cercle
cxEtcy C'est défini comme le Centre d'un cercle x yCoordonnées rRayon représentatif

<circle cx="100" cy="50" r="40" fill="" stroke="green" stroke-width="10">

Les paramètres représentent respectivement les coordonnées de départ Rayon maximum et rayon minimum Angle de rotation Grand et petit arc d'angle (1,0) Dans le sens contraire des aiguilles d'une montre(1,0) Coordonnées de la fin x y

<path d="M120,120 A60 60 0 1 1 121 121 Z" fill="" stroke="pink" stroke-width="20"> </path>

svgGradient

id Est le nom unique du gradient x1 y1 x2 y2 Direction du gradient de réglage

 <defs>
            <linearGradient id="grad" x1="0%" y1="0%"  x2="100%" y2="100%">
            <stop offset="0%" stop-color="yellow" stop-opacity=""/>  
            <stop offset="33%" stop-color="blue" stop-opacity=""/>  
            <stop offset="66%" stop-color="green" stop-opacity=""/>  
            <stop offset="100%" stop-color="pink" stop-opacity=""/>     
            </linearGradient>
        </defs>
        // fillDéfinir la couleur de remplissage id C'est le nom du gradient 
        <rect x="10" y="10" width="200" height="200" fill="url(#grad)" style=""/>

svgAnimation

svg L'animation n'est pas disponible pour certaines scènes ,Il suffit de comprendre.
Suivez - moi.css L'animation ressemble beaucoup à
attriName:Déformation
type: Sélectionnez comment l'animation fonctionne Voici la rotation
form:Par où commencer?
to:Où ça finit
dur:Temps d'exécution de l'animation
repeatCount:Nombre de répétitions d'animation

  <g>
            <text x="150"  y="100" style="">Manger Dormez. </text>
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="rotate"
                from="0"
                to="100"
                dur="250ms"
                repeatCount="indefinite"/>

        </g>

svgTexte

Définir un itinéraire path id Nom de l'itinéraire d'exécution comme texte Selonid Sélectionnez le style d'alignement du texte

        <defs>
            <path d="M0 50 l100 100 l100 -100 Z " id="p1"/>
            <path d="M0 50 l100 100 l100 -100 Z " id="p2"/>
        </defs>
        <text x=""  y="" style="">
            <textPath xlink:href="#p1">
                 Tao Dahua   Fat Lin.   C'est un sacré Groupe de six 
                
            </textPath>
        </text>