在<use>中设置样式和SVG循环而不使用*符号的方法是使用CSS选择器和SVG的属性。
首先,可以使用CSS选择器来设置<use>元素的样式。通过在<use>元素上添加class或id属性,并在CSS中使用相应的选择器来定义样式。例如,如果<use>元素有一个class为"my-use",可以使用以下CSS代码来设置样式:
.my-use {
fill: red;
stroke: blue;
}
这样就可以将<use>元素的填充颜色设置为红色,描边颜色设置为蓝色。
其次,可以使用SVG的属性来设置<use>元素的样式。在<use>元素中,可以使用xlink:href属性来引用一个已定义的SVG元素,并继承其样式。例如,如果有一个id为"my-svg"的SVG元素,可以使用以下代码将<use>元素的样式设置为与该SVG元素相同:
<use xlink:href="#my-svg"></use>
这样,<use>元素将继承"id"为"my-svg"的SVG元素的所有样式。
关于SVG循环,可以使用SVG的动画属性来实现。其中,可以使用<animate>元素来定义动画效果,并将其添加到<use>元素中。例如,可以使用以下代码在<use>元素中添加一个循环旋转的动画效果:
<use xlink:href="#my-svg">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite" />
</use>
这样,<use>元素将以5秒为周期无限循环地旋转。
总结起来,通过使用CSS选择器和SVG的属性,可以在<use>中设置样式和SVG循环而不使用*符号。
领取专属 10元无门槛券
手把手带您无忧上云