jQuery 如何设置 SVG <g> 元素的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18697278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style SVG <g> element?
提问by Sudarshan
I have some SVG elements grouped together in a <g>element. I just want to style that <g>element to show grouping of elements. Like I want to give some background-color and a border to it. How it would be achieved?
我有一些 SVG 元素组合在一个<g>元素中。我只想设置该<g>元素的样式以显示元素分组。就像我想给它一些背景颜色和边框一样。如何实现？
I tried filland strokeattribute to <g>element, but it doesn't work. How it would be possible? Thanks in advance!
我尝试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>
采纳答案by rafaelcastrocouto
You actually cannot draw Container Elements
你实际上不能绘制容器元素
But you can use a "foreignObject" with a "SVG" inside it to simulate what you need.
但是你可以使用一个带有“SVG”的“foreignObject”来模拟你需要的东西。
<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>
回答by Boldewyn
You cannot add style to an SVG <g>element. Its only purpose is to group children. That means, too, that style attributes you give to it are given down to its children, so a fill="green"on the <g>means an automatic fill="green"on its child <rect>(as long as it has no own fillspecification).
您不能向 SVG<g>元素添加样式。它的唯一目的是将孩子分组。这也意味着，您赋予它的样式属性会传递给它的子项，因此 a fill="green"on<g>意味着fill="green"它的子项上的自动属性<rect>（只要它没有自己的fill规范）。
Your only option is to add a new <rect>to the SVG and place it accordingly to match the <g>children's dimensions.
您唯一的选择是向<rect>SVG添加一个新的并相应地放置它以匹配<g>孩子的尺寸。
回答by Andrew Grothe
The style that you give the "g" element will apply the child elements, not the "g" element itself.
您赋予“g”元素的样式将应用子元素，而不是“g”元素本身。
Add a rectangle element and position around the group you wish to style.
在要设置样式的组周围添加一个矩形元素和位置。
See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
请参阅：https: //developer.mozilla.org/en-US/docs/Web/SVG/Element/g
EDIT: updated wording and added fiddle in comments.
编辑：更新措辞并在评论中添加小提琴。
回答by gavgrif
I know its long after this question was asked and answered - and I am sure that the accepted solution is right, but the purist in me would rather not add an extra element to the SVG when I can achieve the same or similar with straight CSS.
我知道在这个问题被提出和回答之后很久了 - 我确信接受的解决方案是正确的，但是当我可以用直接 CSS 实现相同或相似时，我的纯粹主义者宁愿不向 SVG 添加额外的元素。
Whilst it is true that you cannot style the gcontainer element in most ways - you can definitely add an outline to it and style that - even changing it on hover of the g- as shown in the snippet.
虽然您确实无法g以大多数方式设置容器元素的样式- 您绝对可以为其添加轮廓并设置样式 - 甚至在悬停时更改它g- 如代码段所示。
It not as good in one regard as the other way - you can put the outline box around the grouped elements - but not a background behind it. Sot its not perfect and won't solve the issue for everyone - but I would rather have the outline done with css than have to add extra elements to the code just to provide styling hooks.
它在某一方面不如其他方式好 - 您可以将轮廓框放在分组元素周围 - 但不能在其后面放置背景。所以它并不完美并且不会为每个人解决问题 - 但我宁愿用 css 完成大纲，而不是为了提供样式挂钩而必须向代码添加额外的元素。
And this method definitely allows you to show grouping of related objects in your SVG's.
这种方法绝对允许您在 SVG 中显示相关对象的分组。
Just a thought.
只是一个想法。
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>