将SVG形状从Viewbox空间转换为源背景图像维度空间

我有一系列SVG文档。每个文档都包含一个作为背景的

。在此背景下，渲染了许多形状，可以是

，

，也可以是

。形状在

视图框

中渲染，该视图框的尺寸是

源的比例，其系数为

0.24

。因此，

具有值为

比例（0.24）

的变换属性

14-23
...

现在，我想做的是将每个形状的顶点从viewbox的坐标空间变换到一个新的坐标空间，该坐标空间包含图像源的尺寸。我的目标是将源图像渲染为具有源图像尺寸的div的

背景图像

，在保持纵横比的同时缩放div以适合任意视口，然后根据X轴和Y轴的适合比例渲染形状

---

我的第一个想法是通过比例变换运行每个顶点，其系数为

1.76

，或者，如我所想，当前比例加上变换后的图像比例和

1

之间的差值。然而，这并没有给我期望的输出。有人能澄清我哪里出了问题吗？

您可以实现您的目标，而无需自己计算这些因素，只需描述它们，然后让渲染器为您进行转换

th>容器<代码> <代码>获取背景图像，使其以最大可能的大小适合于内部，而不松开纵横比，并将其定位在中间。

通过将

元素的宽度和高度定义为容器的100%，可以对该元素执行相同的操作。viewbox按照与背景图像相同的规则缩放到该空间中，只是用稍微不同的语法写下来。（默认情况下，

preserveSpectratio

的引号值，您可以将其关闭）：

#容器{
背景图片：url（14-23.png）；
背景尺寸：包含；
背景位置：中心；
}
.形状{
填充：无；
指针事件：可见；
}
...

现在仍然需要做的就是描述容器div的大小

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2881.44 209.28">
<title>14-23</title>
<style type="text/css"><![CDATA[
  .shape {
    fill: none;
    pointer-events: visible;
  }
]]></style>
<image width="12006" height="872" transform="scale(0.24)" xlink:href="14-23.png"/>
<g id="_x31_000_East_Ohio_St_Year_Built:_196_x2A_-1968">
    <rect x="144.5" y="180.3" class="shape" width="44.3" height="15"/>
</g>
...
</svg>

<style type="text/css">
  #container {
    background-image: url(14-23.png);
    background-size: contain;
    background-position: center;
  }
  .shape {
    fill: none;
    pointer-events: visible;
  }
</style>
<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg"
       width="100%" height="100%" viewBox="0 0 2881.44 209.28"
       preserveAspectRatio="xMidYMid meet">
    <g id="_x31_000_East_Ohio_St_Year_Built:_196_x2A_-1968">
      <rect x="144.5" y="180.3" class="shape" width="44.3" height="15"/>
    </g>
    ...
  </svg>
</div>