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

SVG元素可以重用SVG文档中其他地方的SVG形状，包括元素和元素。可重用的形状可以定义在元素内部（使形状在使用前不可见）或外部。一、简单案例分析示例这个该实例显示元素中定义的元素，除非被元素引用，否则它是不可见的。在引用元素之前，必须通过其ID属性为其设置ID。元素通过其xlink:href属性。请注意属性值中ID前面的#。该元素通过其x和y属性指定在何处显示重复使用的形状。请注意，元素内部的形状位于0,0。这样做是因为它们的位置被添加到元素中指定的位置。运行后图像效果：图像蓝色圆点点不在示例中。添加它们以显示两个元素的x和y。2.在defs元素之外使用shape元素可以在SVG图像中的任意位置重用该元素，只要shape具有具有唯一值的id属性即可。示例此示例定义了一个包含一个元素的元素。然后它逐个元素（包括嵌套元素）重复使用。运行后图像效果：蓝点点不在示例中。添加它们以显示两个元素的x和y。2.在defs元素之外使用shape元素来重用SVG图像中的任何元素，只要shape具有具有唯一值的id属性即可。示例这个该示例定义了一个元素，其中包含一个元素。然后它通过元素重用元素（包括嵌套的元素）。运行后图像效果：注意显示原始形状及其重复使用的版本。发生这种情况是因为要重用的形状（元素）未在元素或元素内定义。因此它是可见的。同样，蓝点显示元素的坐标。3.设置CSS样式如果原始形状没有设置CSS样式，可以在复用形状时设置CSS样式。只需在元素的样式属性中指定要设置的样式。这是一个示例：示例请注意，原始形状上没有设置样式属性。然后将使用默认样式（通常为黑色）进行渲染。4.小结本文以SVG为基础，介绍如何复用SVG文档中的其他位置来设置CSS样式。通过案例分析，运行效果的展示可以更直观，更实用的看到在实际项目中的应用。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。