Question

假设我有尺寸1280x720

的图像

我有一些多边形，这些多边形是由服务器在需要在此图像上绘制的原始大小的图像之上计算的。他们是

<polygon points="531,243,687,316,663,593,360,717,191,520" />                                    
<polygon points="275,17,422,45,412,312,271,235" />
<polygon points="929,180,1108,248,985,707,847,676" />
<polygon points="598,70,700,101,658,531,516,436" />

现在我需要显示图像并将这些多边形叠加在它上面。然而问题是浏览器根据窗口大小来缩放图像，这是动态的。使用object-fit-contain CSS显示图像，因此在调整大小时尺寸会发生变化。

如何确保SVG协调高于自动量表？

我已经阅读过关于viewBox但我并不是真的想在这里指定我自己的坐标。问题是我真的不知道浏览器如何显示/调整图像，因为它取决于窗口。

感谢

Answer 1

SVG的默认缩放行为与object-fit: contain相同。所以你需要做的就是将SVG的viewBox宽度和高度设置为与图像相同的尺寸。

因此，例如，如果您的图片是640x480，请将您的viewBox设置为"0 0 640 480"。

div {
  position: relative;
}

div > img,
div > svg {
  width: 100%;
  height: 200px;
}

img {
  object-fit: contain;
}

svg {
  position: absolute;
  top: 0;
}

<div>
  <img src="http://lorempixel.com/output/people-q-c-640-480-1.jpg"/>
  
  <svg viewBox="0 0 640 480">
    <circle cx="450" cy="215" r="40" fill="none" stroke="red" stroke-width="10"/>
  </svg>
</div>

Answer 2

你能以任何方式避免使用html吗？一个简单的图像编辑器似乎是一种更好的方法，但我不能说，因为我不知道你的情况。否则，您可能会使用保证金进行展示位置。

Answer 3

您可以在<image>标记内使用<svg>元素，然后它们将成为一个，您可以使用它进行任何缩放。

这是SVG图片示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect x="10" y="10" height="130" width="500" style="fill: #000000"/>

  <image x="20" y="20" width="300" height="80"
     xlink:href="http://jenkov.com/images/layout/top-bar-logo.png" />

  <line x1="25" y1="80" x2="350" y2="80"
            style="stroke: #ffffff; stroke-width: 3;"/>
</svg>

参考：SVG image element

在没有jquery的情况下调整大小的图像上的SVG

3 个答案: