操纵 SVG 图标的尺寸

  • 本文关键字:图标 SVG 操纵 css svg
  • 更新时间 :
  • 英文 :


我有以下SVG文件

<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 30">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z" fill="#FFF"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<g>
<path fill="none" d="M-1-1h583v403H-1z"/>
</g>
</symbol>
<path d="M85 84 127 84 127 126 85 126 "/> 
<use href="#icon-ec2d25d9" x="85" y="84" width="22" height="36"  fill="none" stroke="black" class="icon 4"/>
</svg>

(https://jsfiddle.net/L5xz73j4/)我想修改黑色矩形内的小图标的尺寸,以匹配矩形的宽度和高度。我正在动态生成这些类型的SVG,所以我不能开始手动处理宽度和高度属性。我的问题是,我可以使用黑色矩形的路径元素来实现这一点吗?或者什么是合适的方法?

根据内部组的大小,我已将符号的viewBox更改为viewBox="0 0 60 60"。现在符号是方形的。为了使使用填充黑色方块,我将使用的宽度和高度更改为width="42" height="42",即黑色方块的大小。

我希望这就是你问的问题

<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 60">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>

<!--<g><path fill="none" d="M-1-1h583v403H-1z"/></g>-->

</symbol>
<path d="M85 84 127 84 127 126 85 126 " /> 
<use href="#icon-ec2d25d9" x="85" y="84" width="42" height="42"  fill="none" stroke="black" class="icon 4"/>
</svg>

最新更新