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>

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

1 个答案: