如何风格SVG< g>元件? [英] How to style SVG <g> element?
本文介绍了如何风格SVG< g>元件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些SVG元素在< g>
元素中分组在一起。我只是想要样式< g>
元素来显示元素的分组。像我想给一些背景颜色和边框。
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?
我尝试了填充
和 stroke
属性到< g>
元素,但它不工作。怎么可能?提前感谢!
I tried fill
and stroke
attribute to <g>
element, but it doesn't work. How it would be possible? Thanks in advance!
<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>
推荐答案
你实际上不能绘制容器元素
但您可以使用foreignObject与SVG,以模拟您需要的内容。
But you can use a "foreignObject" with a "SVG" inside it to simulate what you need.
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>
这篇关于如何风格SVG< g>元件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文