web-dev-qa-db-fra.com

Comment style élément SVG <g>?

J'ai quelques éléments SVG regroupés dans un <g> élément. Je veux juste dénommer ça <g> élément pour afficher le regroupement des éléments. Comme si je voulais lui donner une couleur de fond et une bordure. Comment cela serait-il réalisé?

J'ai essayé fill et stroke attribut à <g> _ élément, mais cela ne fonctionne pas. Comment cela serait-il possible? Merci d'avance!

exemple ici

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
    <g fill="blue" stroke="2">
            <rect id="svg_6" height="112" width="84" y="105" x="136" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#00ff00"/>
        <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="271" cy="156" id="svg_7" rx="64" ry="56"/>
    </g>
</svg>
javascriptjqueryhtmlcsssvg
37
Sudarshan

Vous ne pouvez réellement pas dessiner éléments de conteneur

Mais vous pouvez utiliser un "foreignObject" contenant un "SVG" pour simuler ce dont vous avez besoin.

http://jsfiddle.net/VBmbP/4/

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
      <foreignObject id="G" width="300" height="200">
        <svg>
          <rect fill="blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000"/>
          <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56"/>     
        </svg>
          <style>
              #G {
                background: #cff; border: 1px dashed black;
              }
              #G:hover {
                background: #acc; border: 1px solid black;
              }
          </style>
      </foreignObject>
    </svg>
25
rafaelcastrocouto

Vous ne pouvez pas ajouter de style à un élément SVG <g>. Son seul but est de regrouper les enfants. Cela signifie également que les attributs de style que vous lui donnez sont attribués à ses enfants. Par conséquent, un fill="green" Sur le <g> Signifie un fill="green" Automatique sur son enfant <rect> (Tant qu'il n'a pas de spécification fill propre).

Votre seule option est d'ajouter un nouveau <rect> Au SVG et de le placer en conséquence pour qu'il corresponde aux dimensions de l'enfant <g>.

45
Boldewyn

Le style que vous donnez à l'élément "g" appliquera les éléments enfants, pas l'élément "g" lui-même.

Ajoutez un élément rectangle et positionnez-le autour du groupe que vous souhaitez styler.

Voir: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

EDIT: mise à jour du libellé et ajout de violon dans les commentaires.

4
Andrew Grothe