在不使用jquery调整大小的图像上缩放SVG

debugcn 发表于 Dev

用户名

让我们假设我有一个尺寸的图像 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-containCSS显示的，因此尺寸会随着我调整尺寸而改变。

如何确保SVG坐标高于自动缩放比例？

我已经阅读过有关viewBox的信息，但我并不是真的希望在此处指定自己的坐标。问题是我不太了解浏览器如何显示图像/调整图像大小，因为它取决于窗口。

谢谢

保罗·勒博

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。