svg - 使用固定大小的元素来增长 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 调整其大小时，无论其大小如何，

• 尾部将以相同的比例保留在左侧，
• 头部将保留在右侧，也具有相同的比例，并且
• body 将无限期地水平拉伸(stretch)。

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

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>