首页 文章

SVG viewBox在保留纵横比的同时打破了viewPort的100％填充

提问于
浏览 次
1

问： How can I use the viewBox coordinate system whilst still filling the viewPort completely and preserving aspect ratio?

我是svg编程的新手，所以希望我只是误解了一个基本概念 .

我想根据用户上传的背景图片创建一个交互式和响应式 Map .

在这里's the basic example I'我试图去上班（JSFiddle）：

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="200px" 
     height="400px"  
     preserveAspectRatio="xMidYMid meet" 
     style="border: 1px solid black;">

    <image x="0" y="0" width="100%" height="100%"
           preserveAspectRatio="xMidYMid meet"
           xlink:href="http://www.bized.co.uk/sites/bized/modules/bized_cb_navigation/images/floorplan_info.gif">
    </image>
</svg>

这很好用 . 但是，由于viewPort发生了变化，因此图像始终会填充它，同时保持其纵横比 . （See wide-Screen example）

接下来我添加一个坐标系 viewBox="0 0 100 100" ：

如果拍摄的图像宽度大于高，则宽屏视图会断开，垂直屏幕视图仍然有效 .

当我在Chrome DOM元素检查器中检查SVG时，对于前两个示例而不使用 viewBox="0 0 100 100" svg元素与viewPort具有相同的大小 . 添加viewBox属性后，该元素将变为一个正方形，其边长等于viewPort边的较小部分 .

此行为在本教程中解释为：

“...视图框根据两个纵横比中较小的一个缩放......”

我需要viewBox属性，以便我可以在viewPort中缩放和平移图像 .

svg responsive-design viewport aspect-ratio

2 回答

  • 1

    这是因为您实际上有两个竞争的viewBox转换 .

    由于您的方形视图框，您将图像拟合为正方形，然后将正方形拟合到SVG矩形中 .

    如果您使SVG viewBox与图像具有相同的尺寸（或相同的宽高比），则问题将得到解决 .

    viewBox="0 0 155 210"

    http://jsfiddle.net/2qexypLs/15/

    http://jsfiddle.net/2qexypLs/16/

    回复于
  • 0

    我目前的解决方案是使用JavaScript动态地将viewBox width 和 height 值设置为与svg width 和 height 值相同的值 . That way the aspect ratio for x and y are the same 并且填充返回到viewPort的100％ . （JsFiddle）

    对于 Map 的交互式元素图层，我有一个单独的坐标系，当定义svg viewPort时，该坐标系映射到背景图像缩放比例 . 这意味着需要在svg define / change width / height事件上重新计算所有坐标 .

    在第一次重新计算之后，可以通过更改viewBox参数来缩放和平移 Map ，而无需进一步计算 .

    回复于

相关问题