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

g元素实例

g元素代码实例

  1. <svg xmlns="http://www.w3.org/2000/svg"
  2. xmlns:xlink="http://www.w3.org/1999/xlink">
  3.  
  4. <g>
  5. <line x1="10" y1="10" x2="85" y2="10"
  6. style="stroke: #006600;"/>
  7.  
  8. <rect x="10" y="20" height="50" width="75"
  9. style="stroke: #006600; fill: #006600"/>
  10.  
  11. <text x="10" y="90" style="stroke: #660000; fill: #660000">
  12. Text grouped with shapes</text>
  13. </g>
  14.  
  15. </svg>

效果如下

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

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

  1. <svg xmlns="http://www.w3.org/2000/svg"
  2. xmlns:xlink="http://www.w3.org/1999/xlink">
  3.  
  4. <g transform="rotate(45 50 50)">
  5. <line x1="10" y1="10" x2="85" y2="10"
  6. style="stroke: #006600;"/>
  7.  
  8. <rect x="10" y="20" height="50" width="75"
  9. style="stroke: #006600; fill: #006600"/>
  10.  
  11. <text x="10" y="90" style="stroke: #660000; fill: #660000">
  12. Text grouped with shapes</text>
  13. </g>
  14.  
  15. </svg>

效果如下

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

g元素样式继承

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

例如

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

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

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

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

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

[翻译svg教程]svg 中的g元素的更多相关文章

  1. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  2. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  3. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  4. 使用SVG中的Symbol元素制作Icon【摘转】

    以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...

  5. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  6. 使用iframe方式获得svg中的DOM元素,和svg 的 contentDocument 返回 null

    碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 https://segmentfault.com/q/1010000009001758 var iframe = document.getEl ...

  7. SVG 教程

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...

  8. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  9. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

随机推荐

  1. Django Restful Framework (一): Serializer

    Serializer 允许复杂数据(比如 querysets 和 model 实例)转换成python数据类型,然后可以更容易的转换成 json 或 xml 等.同时,Serializer也提供了反序 ...

  2. erlang 虚机性能调优

    erlang 默认启动参数更多的是针对电信平台实时特性,简单调整参数能很大程度降低CPU消耗,提高处理能力. 1. 关闭spin_wait 设置参数:+sbwt none 我上一篇文章提到:erlan ...

  3. 53. 特殊的O(n)时间排序[sort ages with hashtable]

    [本文链接] http://www.cnblogs.com/hellogiser/p/sort-ages-with-hashtable.html [题目] 某公司有几万名员工,请完成一个时间复杂度为O ...

  4. JNDI

    这两天研究了一下 context.lookup("java:comp/env/XXX")和直接context.lookup("XXX")的区别 网上关于这两个的 ...

  5. Python之Web框架

    Python之Web框架: 一.  Web框架的本质: 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env pyth ...

  6. C# 类使用小demo

    太晚了,不说了,直接上图 运行结果

  7. EXCEL 对比数据是否重复

    1.同一列 后一行对比前面所有行 查找是否重复 =IF(COUNTIF(B$2:B2,B2)>1,"重复","") 2.两行两列(多行多列) 两行两列 = ...

  8. 修复win10升级时断电inaccessible boot device

    代码提示0xc0000001 这里的解决方法对系统以及个人的没有文件丢失的影响,没有重装以及重置上丢失东西的顾虑 解决方法: WINDOWS/system32/config/RegBack/SYSTE ...

  9. 3.1 AngularJS必备知识

    AngularJS是一个WEB应用框架. 本节我们会学习控制器(控制数据),会学习作用域(连接控制器和用户界面),用户界面又叫做视图,通过模板和作用域来创建交互视觉效果.另外,我们还会学习其他的特性比 ...

  10. POCO库——Foundation组件之加解密Crypt

    加解密Crypt:内部提供多种加解密方式.信息摘要提取.随机数产生等,具体的算法内部实现不做研究学习: DigestEngine.h :DigestEngine类作为各种摘要提取的基类,提供必要的接口 ...