如何设置SVG <g>元素的样式？

Question

我有一些SVG元素组合在一个<g>元素中.我只想设置该<g>元素以显示元素分组.就像我想给它一些背景颜色和边框.如何实现？

我尝试fill并stroke归因于<g>元素,但它不起作用.怎么可能？提前致谢!

在这里取样

<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>

Answer 1

您无法将样式添加到SVG <g>元素.它的唯一目的是将儿童分组.这意味着,那就是,样式属性,你给它赋予到其子,所以fill="green"在<g>手段自动fill="green"在其子<rect>(只要它没有自己的fill规格).

您唯一的选择是向<rect>SVG 添加一个新的并相应地放置它以匹配<g>孩子的尺寸.

Answer 2

你实际上无法绘制容器元素

但是你可以在其中使用带有"SVG"的"foreignObject"来模拟你需要的东西.

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>

Answer 3

我知道在这个问题被提出和回答之后很久了 - 我确信接受的解决方案是正确的，但是当我可以用直接 CSS 实现相同或相似时，我的纯粹主义者宁愿不向 SVG 添加额外的元素。

虽然您确实无法g以大多数方式设置容器元素的样式- 您绝对可以为其添加轮廓并设置样式 - 甚至在悬停时更改它g- 如代码段所示。

它在某一方面不如其他方式好 - 您可以将轮廓框放在分组元素周围 - 但不能在其后面放置背景。所以它并不完美，不会为每个人解决问题 - 但我宁愿用 css 完成大纲，而不是为了提供样式钩子而向代码添加额外的元素。

这种方法绝对允许您在 SVG 中显示相关对象的分组。

只是一个想法。

g {
    outline: solid 3px blue;
    outline-offset: 5px;
  }

g:hover {
 outline-color: red
}

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
  <g>
    <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"/>     
  </g>
</svg>

Answer 4

您赋予“g”元素的样式将应用子元素，而不是“g”元素本身。

在要设置样式的组周围添加一个矩形元素和位置。

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

编辑：更新措辞并在评论中添加小提琴。