主页 / 问题 / 1110085
Accepted
word
Asked:2020-04-14 15:22:32 +0800 CST2020-04-14 15:22:32 +0800 CST

如何水平复制多次svg？

  • 772

有一个star svg来显示评分，我们需要水平重复几次。
这样您就可以使用 css 调整星星之间的间距。
如何复制到具有某些缩进的水平线 svg？

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style type="text/css">
.st0{fill:#ffff00;}
</style>
<path class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
或者至少告诉我如何设置标签中的缩进，path以便您可以复制标签path并放置所需的缩进？
也许有必要应用另一个svg，你能告诉我如何连续水平复制svg吗？

css

1 个回答

  1. Best Answer

    有一个复制 svg 元素的命令<use>
    。为此，将元素放在一个部分中<defs>并使用克隆此元素<use>

    <svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" >
<style type="text/css">
.st0{fill:gold;}
</style>
<defs>
<path id="star" class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</defs>
<use  xlink:href="#star" x="10" y="0"  />
 <use  xlink:href="#star" x="35" y="0"  />
   <use  xlink:href="#star" x="60" y="0"  /> 
     <use  xlink:href="#star" x="85" y="0"  />
        <use  xlink:href="#star" x="110" y="0"  />
</svg>

    • 4

相关问题