我有以下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>