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

用户名

让我们假设我有一个尺寸的图像 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

为什么我的SVG图像不使用CSS的width属性缩放?

来自分类常见问题

如何在Mac OSX上使用终端调整图像大小?

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用javascript调整图像大小

来自分类Dev

SVG图像元素调整大小图片

来自分类Dev

jQuery,调整画布大小而不缩放

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

使用drawInRect调整图像大小,同时保持纵横比不变,例如“缩放纵横比填充”?

来自分类Dev

我们可以在不调整大小的情况下对图像使用缩放比例吗?

来自分类Dev

jQuery使用心跳效果调整图像大小

来自分类Dev

使用Jquery .animation进行平滑的图像调整大小和缩放

来自分类Dev

在C#中使用缩放和裁剪来调整图像大小

来自分类Dev

在show方法中使用Rails上的ruby调整图像大小

来自分类Dev

jQuery:在调整大小的图像上冒烟

来自分类Dev

使用CSS调整图像大小

来自分类Dev

Colorbox上的jQuery图像调整大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用jQuery进行居中和动态调整图像大小

来自分类Dev

在jQuery中调整图像大小无法在所有图像上使用

来自分类Dev

ImageMagick:在不缩放图像的情况下调整图像大小

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS缩放图像而无需调整大小

来自分类Dev

批量图像调整大小/缩放

来自分类Dev

如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

来自分类Dev

在按钮上使用Jquery调整SVG图像的大小

来自分类Dev

使用 javascript 调整图像大小

来自分类Dev

使用反应更改缩放/缩放后窗口调整大小的 svg 定位

来自分类Dev

如何使用 jQuery UI 调整 SVG 标签图像的大小?

Related 相关文章

  1. 1

    为什么我的SVG图像不使用CSS的width属性缩放?

  2. 2

    如何在Mac OSX上使用终端调整图像大小?

  3. 3

    使用CSS调整图像大小

  4. 4

    使用javascript调整图像大小

  5. 5

    SVG图像元素调整大小图片

  6. 6

    jQuery,调整画布大小而不缩放

  7. 7

    在Ubuntu上使用convert调整图像的大小

  8. 8

    使用drawInRect调整图像大小,同时保持纵横比不变,例如“缩放纵横比填充”?

  9. 9

    我们可以在不调整大小的情况下对图像使用缩放比例吗?

  10. 10

    jQuery使用心跳效果调整图像大小

  11. 11

    使用Jquery .animation进行平滑的图像调整大小和缩放

  12. 12

    在C#中使用缩放和裁剪来调整图像大小

  13. 13

    在show方法中使用Rails上的ruby调整图像大小

  14. 14

    jQuery:在调整大小的图像上冒烟

  15. 15

    使用CSS调整图像大小

  16. 16

    Colorbox上的jQuery图像调整大小

  17. 17

    使用imagemagick调整图像大小

  18. 18

    使用jQuery进行居中和动态调整图像大小

  19. 19

    在jQuery中调整图像大小无法在所有图像上使用

  20. 20

    ImageMagick:在不缩放图像的情况下调整图像大小

  21. 21

    使用Java调整图像大小

  22. 22

    使用CSS调整图像大小

  23. 23

    使用CSS缩放图像而无需调整大小

  24. 24

    批量图像调整大小/缩放

  25. 25

    如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

  26. 26

    在按钮上使用Jquery调整SVG图像的大小

  27. 27

    使用 javascript 调整图像大小

  28. 28

    使用反应更改缩放/缩放后窗口调整大小的 svg 定位

  29. 29

    如何使用 jQuery UI 调整 SVG 标签图像的大小?

热门标签

归档