SVG形状向右扩展

Question

我正在尝试在SVG中创建一个船形（从顶部看），我希望弓总是具有相同的纵横比，并且船的其余部分用HTML容器增长和缩小。

有点像：

我可以在纯SVG和CSS中使用（不涉及Javascript）吗？

编辑：

作为回应，@ paul-lebeau给出了答案，我想避免将SVG分成两部分，因为这似乎不能可靠地工作。有时，两个部分之间会出现一个很小的空间，如下所示：

Answer 1

很多将取决于船形状是否有任何其他细节，或者您只需要轮廓。如果您只需要轮廓，那么您可以使用两个SVG元素实现所需的外观。弓的一个元素，身体的一个元素。

请注意，在下面的三个示例中，除了设置width的类之外，三个SVG是相同的。

＆＃13;

＆＃13;

.short {
  width: 150px;
}

.medium {
  width: 250px;
}

.long {
  width: 350px;
}

＆＃13;

<svg height="50" class="short">
  <path d="M 70,0 L 70,50 A 70,25 0 1 1 70,0 Z"/>
  <rect x="70" y="0" width="100%" height="50"/>
</svg>

<br>

<svg height="50" class="medium">
  <path d="M 70,0 L 70,50 A 70,25 0 1 1 70,0 Z"/>
  <rect x="70" y="0" width="100%" height="50"/>
</svg>

<br>

<svg height="50" class="long">
  <path d="M 70,0 L 70,50 A 70,25 0 1 1 70,0 Z"/>
  <rect x="70" y="0" width="100%" height="50"/>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

SVG也可以用作background-image。此变体使用数据URI，但它也可以引用外部文件。通过使用百分比，它可以自动扩展到应用它的HTML元素：

＆＃13;

＆＃13;

div {
  height: 50px;
  margin-bottom: 1em;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' height='50'><path d='M 70,0 L 70,50 A 70,25 0 1 1 70,0 Z'/><rect x='70' y='0' width='100%' height='50'/></svg>");
}

.narrow {
  width: 150px;
}

.wide {
  width: 350px;
}

＆＃13;

<div class="narrow"></div>
<div class="wide"></div>

＆＃13;

＆＃13;

＆＃13;