SVG_16_defs标签_use标签_style标签_红绿灯效果

知识点：

• defs标签

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 <use>元素呈现这些元素。

 

• use标签

通过defs定义好被引用的标签或标签组后，再使用use标签进行引用。

use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。

出于安全原因，一些浏览器可能在use元素上应用同源策略，还有可能拒绝载入xlink:href属性内的跨源URI。

 

• style标签

style元素样式表直接在SVG内容中间嵌入。SVG的style元素的属性与HTML中的相应的元素并无二致，功能是一样的，只不过SVG把style封装成了标签形式。

 

重点提醒：

• defs标签中定义的控件，需要配置ID属性，然后style引用时，通过#id获取引用。还可以使用控件的名称，比如circle定义控件属性。

<style>    #cir_red {      fill: red;      stroke: black;      stroke-width: 10px;     }</style>

 

 

• use标签使用xlink:href=“#id”l来进行引用

使用use标签时，注意use的结尾标签，不要在</use>结尾标签之前再写其他标签，会显现不出来，就是所谓的被吞了。

 

先看效果，这次做的效果是红绿灯

 

效果被吞，估计是由于use同源策略被吞了，效果显示不出来，不过我还有录屏。

红绿灯

 

Xi说孔方兄认证