我有一个箭头 SVG,设置如下:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" class="arrow">
<g class="tail">
<circle (...)></circle>
</g>
<g class="body">
<rect (...)></rect>
</g>
<g class="head">
<polygon (...)>
</g>
</svg>
我想对其进行设置,以便在通过 CSS 调整其大小时,无论其大小如何,
尾部
将以相同的比例保留在左侧,头部
将保留在右侧,也具有相同的比例,并且body
将无限期地水平拉伸(stretch)。
我可以这样做吗?我怎样才能做到这一点?
最佳答案
基本上,您可以通过使用具有相对定位的嵌套 svg
元素(根 svg
元素大小的%值)来创建此类 SVG 图形,如下所示。
svg{
overflow:visible;
}
svg.root{
width:200px;
height:100px;
margin:0 10px;
background-color:rgba(255,255,0,.5);
transition: 1s ease-in-out 0s;
}
svg.root:hover{
width:300px;
height:150px;
}
<svg class="root">
<svg class="tail" y="50%">
<circle r="10" fill="red"/>
</svg>
<svg class="head" x="100%" y="50%">
<polygon points="-10,-10 10,0 -10,10" fill="blue"/>
</svg>
<svg class="body" y="50%">
<rect x="0" y="-2" width="100%" height="4" fill="green"/>
</svg>
</svg>
关于svg - 使用固定大小的元素来增长 svg?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42840980/