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

【问题标题】：Growing svg with fixed-size elements?使用固定大小的元素增长 svg？
【发布时间】：2017-08-08 00:50:06
【问题描述】：

我有一个箭头 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 将无限期地水平拉伸。

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

【问题讨论】：

标签： svg aspect-ratio distortion

【解决方案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>

【讨论】：

这不会吓坏 IE 吗？