[翻译svg教程]svg 中的g元素-阿里云开发者社区

开发者社区> 云计算> 正文

[翻译svg教程]svg 中的g元素

简介: svg 中的元素用来组织svg元素。如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个元素一样,和相比这是一个很好的优势,嵌套的svg中元素是不会被变换影响的。

svg 中的<g>元素用来组织svg元素。如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个元素一样,和<svg>相比这是一个很好的优势,嵌套的svg中元素是不会被变换影响的。

g元素实例

g元素代码实例

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <g>
      <line x1="10" y1="10" x2="85" y2="10"
          style="stroke: #006600;"/>

      <rect x="10" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>

      <text x="10" y="90" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>

</svg>

 

效果如下

image

这个代码示例立马,g元素包裹了3个元素(两条线一个文本框)

下面我们看看对g元素进行变换

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <g transform="rotate(45 50 50)">
      <line x1="10" y1="10" x2="85" y2="10"
          style="stroke: #006600;"/>

      <rect x="10" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>

      <text x="10" y="90" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>

</svg>

 

效果如下

image

可以看到,所有被g元素包裹的元素,都在50,50这点 旋转了45度

g元素样式继承

g元素的样式 会被那些包裹着的元素继承

例如

<g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000">
    <rect    x="10"  y="10" width="100" height="50" />
    <circle cx="150" cy="35" r="25" />
    <circle cx="250" cy="35" r="25"
           style="stroke: #009900; fill: #00ff00;"/>
</g>

 

这段代码包含一个矩形 两个圆,g元素定义了边框的宽度和颜色还有填充的颜色

第一个矩形和第一个元都会继承这些第二个圆自己重写了样式,我看看看效果

image

g元组不支持 定位属性 x和y

 

和<svg>元素相比,g元素不支持定位属性x和y,需要定位的时候可以用变换属性代替: transform="translate(x,y)

test

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章