缩放比，没有jQuery的调整大小图像的SVG

让假设我有尺寸1280x720缩放比，没有jQuery的调整大小图像的SVG

的形象我不得不在上面绘制的是由在需要原始大小的图像的顶部的服务器计算的一些多边形这张图片。他们是

<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，但我真的没有在这里指定我自己的坐标。问题是我真的不知道图像将如何显示/浏览器的大小，因为它取决于窗口。

谢谢

来源

2016-12-31 user1361529

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>

来源

2017-01-01 07:56:17

Paul谢谢，我发布了在另一个问题中使用viewBox的问题细节，因为这个问题没有有所有的细节 - 让我知道如果我应该只是编辑这个问题http://stackoverflow.com/questions/41416484/is-svg-resizing-this-hard-what-am--missing – user1361529

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

来源

2016-12-31 20:26:49

可惜不是，img标签是现场摄像机饲料服务器发送不断变化。我需要在它的顶部显示“警报区域”，这是多边形（这些数据也来自服务器通过API） – user1361529

您可以使用<svg>标签内<image>元素，那么他们将成为一个，你可以做任何规模的吧。

下面是一个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

来源

2017-01-01 15:58:02 Dawnb

缩放比，没有jQuery的调整大小图像的SVG

回答

相关问题