Question

我有一些代码可以在SVG中生成图表。我想在网页中显示这些内容。我想要所有的图表按原始比例缩放。有许多不同大小的图表。我显示它们的窗口可能会根据浏览器大小改变大小。但我不希望缩放SVG。我想让它滚动。

我可以在div标签中嵌入object标签，我可以打开div标签的滚动条，但无论我做什么，SVG都会缩放以适合div。

如果我知道图像的大小，我可以强制画布大小相同。有什么方法可以说：引入SVG并且不做任何缩放？

同样的问题是asked before，但没有答案。

以下是一个示例svg文件：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 1191 971" 
    preserveAspectRatio="xMidYMid meet">
    <rect x="372" y="188" width="102" height="68" rx="10" 
        ry="10" style="stroke:blue"/>
    <svg x="372" y="188" width="102" height="68">
        <text>
            <tspan x="51" y="12">DTP</tspan>
        </text>
    </svg>
</svg>

但请记住，这个是1191x971，但其他的将是不同的尺寸。无论SVG图尺寸的大小如何，我都希望它不显示缩放。

这里是我放置它的div标签，我使用AngularJS将URL值放入object标签。在这种情况下，我强制div为300x300，但这是因为我想测试SVG没有缩放到这个大小。

<div style="height:300px;width:300px;overflow:scroll">
    <object type="image/svg+xml"  data="{{svgUrl}}">
    </object>
</div>

我得到的是带有滚动条的300x300区域，但SVG图像缩放（缩小）以适应300x300区域。

Answer 1

现在，您的SVG已配置为扩展/响应。这是因为有两件事。

它有viewBox
未定义width或height，因此这些属性默认为“100％”。含义100％的容器。

如果您希望不缩放，则需要提供<svg>或<object>特定宽度。例如，如果您希望以1：1渲染它，则需要为其提供与viewBox相同的宽度和高度：

<svg width="1191" height="971"  ...>

或

<object width="1191" height="971"  ...>

如果您能够更改原始SVG，那么这可能是最简单的解决方案。否则，你将需要一些JS。加载SVG后，通过contentDocument元素上的<object>属性获取对SVG元素的引用。从那里你可以获得viewBox的宽度和高度。然后使用它们更新<object>宽度和高度。

Answer 2

尝试：

   <!DOCTYPE html>
   <div width="100%" height="100%">
   <svg style="background:plum" width="240px" height="120px"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink" >

   <polygon points="60,30 90,90 30,90">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>
</polygon>
</svg>
</div>

作为封闭 div 标记中的属性：

{{1}}

svg 尺寸（以像素为单位）。

如何在没有任何缩放的情况下显示SVG

2 个答案: