使用固定大小的元素增长svg？

Question

我有一个箭头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调整大小时，不论其大小来进行设置，

• 的tail会留在左手侧相同的比例，
• 的head会留在右手边，也有相同的比例，并
• 的body将水平拉伸无限期。

我可以那样做吗？我怎样才能做到这一点？

Answer 1

基本上，您可以使用相对定位（根值为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>

会