Ajout SVG attributs à une classe

-1

je fais une image en utilisant SVG, et de nombreux éléments ont les mêmes attributs, à savoir un élément typique ressemble à:Ajout SVG attributs à une classe

<line x1="30" y1="10" x2="270" y2="10" stroke-width="0.1" stroke="lightgray" stroke-dasharray="2.5 2.5"/>

Il y a beaucoup de ces types de lignes, où le seules les choses qui changent sont les coordonnées. Il doit y avoir un moyen de créer une sorte de classe contenant les attributs de largeur de trait, de trait et de traits-dasharray? Je me répète beaucoup et ça encombre un peu le code.

J'ai essayé avec CSS, mais je ne peux pas obtenir les attributs SVG qui fonctionnent avec. Est-ce que quelqu'un sait comment y parvenir? Merci

Source

2017-10-04 Harry

Veuillez ajouter un échantillon de code. Il n'y a aucune raison pour que CSS ne fonctionne pas avec SVG. Par exemple. 'line {stroke: lightgray, stroke-dasharray: 2.5, 2.5; } 'etc. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#Using_CSS – helb

Avez-vous essayé de l'implémenter en javascript? Ou essayez-vous d'aller avec un chemin purement css/html? – Matthew

Ces [propriétés de style] (https://www.w3.org/TR/SVG11/styling.html#SVGStylingProperties) peuvent être utilisées comme attributs et comme styles CSS. – ccprog

Comme mentionné dans les commentaires par @ccprog, il y en a un styling attributes qui peut être réglé en utilisant css. Toutes les autres propriétés comme x et y doivent être définies sur l'élément lui-même.

Si vous avez une répétition de beaucoup de choses, vous pouvez envisager d'utiliser la <defs> et <use> comme ceci:

<svg> 
    <defs> 
    <line id="line-1" x="..." ... /> 
    </defs> 

    <use xlink:href="#line-1" transform="translate(...)" /> 
    <use xlink:href="#line-1" transform="rotate(...)" /> 
    <use xlink:href="#line-1" transform="translate(...) rotate(...)" /> 
    . 
    . 
    . 
</svg>

De cette façon, vous pouvez réutiliser la ligne comme il est, mais vous êtes limité à se transforme en matière les réorganiser.

Veuillez noter que dans SVG 2.0 l'utilisation de xlink:href est dépréciée au profit de seulement href dans l'élément <use>.

Source

2017-10-04 18:40:32 philipp

Les attributs de style peuvent hériter de leurs éléments parents. Donc, si vous avez un tas de lignes avec les mêmes propriétés, enveloppez-les dans un groupe et appliquez-y les propriétés.

<g stroke-width="0.1" stroke="lightgray" stroke-dasharray="2.5 2.5"/> 
    <line x1="30" y1="10" x2="270" y2="10"/> 
    <line x1="40" y1="10" x2="270" y2="30"/> 
    ...etc... 
</g>

Source

2017-10-05 06:30:11

Ajout SVG attributs à une classe

Répondre

Questions connexes