63

我有一些 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>
4

4 回答 4

62

您不能向 SVG<g>元素添加样式。它的唯一目的是对孩子进行分组。这也意味着，你赋予它的样式属性被赋予它的子元素，所以 a fill="green"on意味着它的子元素<g>是自动的（只要它没有自己的规范）。fill="green"<rect>fill

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

于 2013-09-09T11:53:55.083 回答
35

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

但是您可以使用内部带有“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>
于 2013-09-09T12:59:20.037 回答
20

我知道在这个问题被问和回答很久之后 - 我确信公认的解决方案是正确的，但是当我可以使用直接 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>

于 2020-02-23T11:09:50.907 回答
11

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

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

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

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

于 2013-09-09T11:53:34.440 回答