SVG g 标签

简介

<g> 元素作用是分组,能把多个元素组合在一起,<g> 标记实施的样式和渲染会作用到这个分组内的所有元素上。

实例

<svg height="200" width="500" viewBox="0 0 140 50" xmlns="http://www.w3.org/2000/svg">
    <g stroke="green" fill="white" stroke-width="4">
        <rect x="20" y="10" width="30" height="30" rx="2" ry="2"/>
        <rect x="45" y="10" width="25" height="25" rx="2" ry="2"/>
        <rect x="65" y="10" width="20" height="20" rx="2" ry="2"/>
        <rect x="80" y="10" width="15" height="15" rx="2" ry="2"/>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注