文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章带你了解SVG <use> 元素

2024-12-03 14:11

关注

SVG 元素可以重用SVG文档中其他位置(包括 元素和 元素)的SVG形状。可以在 元素内部(使形状直到使用之前不可见)或外部定义重用形状。

一、简单案例分析

示例

  1.  
  2. "en"
  3.    
  4.     "UTF-8"
  5.     Document 
  6.    
  7.   "background-color: aqua;"
  8.  
  9.     "500" height="100" style="fill: #FF0000;"
  10.        
  11.         "shape"
  12.           "0" y="0" width="50" height="50" > 
  13.           "0" cy="0" r="50"
  14.          
  15.        
  16.  
  17.       "#shape" x="50" y="50"
  18.       "#shape" x="200" y="50"
  19.  
  20.       "50" cy="50" r="5" style="fill:#0000ff;"
  21.       "200" cy="50" r="5" style="fill:#0000ff;"
  22.  
  23.      
  24.  
  25.    
  26.  
  27.  

这个实例显示了在元素中定义的元素。这使得不可见,除非被元素引用。

在引用元素之前,必须通过其ID属性对其设置ID。元素通过其xlink:href属性。注意属性值中ID前面的#。

元素通过其x和y属性指定在何处显示重复使用的形状。请注意,元素内部的形状位于0,0。这样做是因为它们的位置已添加到元素中指定的位置。

运行后图像效果:

图片

蓝点圆点不是示例的一部分。添加它们是为了显示两个 元素的 x 和 y。

二、在defs元素外使用形状

元素可以重用SVG图像中任何位置元素,只要该形状具有唯一值的id属性即可。

示例

本示例定义了一个元素,其中包含一个元素。然后,它通过元素重用元素(包括嵌套的元素)。

运行后图像效果:

蓝点圆点不是示例的一部分。添加它们是为了显示两个 元素的 x 和 y。

二、在defs元素外使用形状

元素可以重用SVG图像中任何位置元素,只要该形状具有唯一值的id属性即可。

示例

  1. "500" height="110"
  2.       "shape2"
  3.         "0" y="0" width="50" height="50" /> 
  4.        
  5.       "#shape2" x="200" y="50" /> 
  6.       "200" cy="50" r="5" style="fill:#0000ff;" /> 
  7.  

本示例定义了一个元素,其中包含一个元素。然后,它通过元素重用元素(包括嵌套的元素)。

运行后图像效果:

同时显示了原始形状及其重用版本。之所以发生这种情况,是因为未在元素或元素内定义要重用的形状(元素)。因此它是可见的。

同样,蓝色圆点显示元素的坐标。

三、设置CSS样式

如果原始形状上没有设置CSS样式,则可以在重用形状时设置CSS样式。只需指定要在元素的style属性内设置的样式。这是一个示例:

  1. "500" height="110"
  2.  
  3.       "shape3"
  4.         "0" y="0" width="50" height="50" /> 
  5.        
  6.  
  7.       "#shape3" x="100" y="50" style="fill: #00ff00;" /> 
  8.       "#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;" /> 
  9.  
  10.  

原始形状上没有设置style属性。然后将使用默认样式(通常为黑色)进行渲染。

四、总结

本文基于SVG基础,介绍了如何重用SVG文档中其他位置,设置CSS样式。通过案例分析,运行效果的展示 ,能够更直观的,更具有看到在实际项目中应用。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

 

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯