web-dev-qa-db-ja.com

SVG <g>要素をスタイルするには？

<g>要素にグループ化されたいくつかのSVG要素があります。 <g>要素のスタイルを設定して、要素のグループ化を示したいだけです。背景色とそれに境界線を付けたいように。それはどのように達成されますか？

<g>要素にfillおよびstroke属性を試しましたが、機能しません。どのようにそれが可能でしょうか？前もって感謝します！

ここのサンプル

<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

実際には描画できません コンテナ要素

ただし、「foreignObject」と「SVG」を使用して、必要なものをシミュレートできます。

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

SVGにスタイルを追加することはできません<g>要素。その唯一の目的は、子供をグループ化することです。つまり、スタイル属性を指定すると、その子に渡されるため、fill="green"上の<g>は自動fill="green"その子<rect>（独自のfill仕様がない限り）。

唯一のオプションは、新しい<rect>をSVGに追加し、それに応じて<g>子供の寸法。

45
Boldewyn

「g」要素に指定したスタイルは、「g」要素自体ではなく、子要素に適用されます。

長方形要素を追加し、スタイルを設定するグループの周りに配置します。

参照： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

編集：文言を更新し、コメントにフィドルを追加しました。

4
Andrew Grothe