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

Question

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

我可以 ember div 标签中的对象标签，我可以打开 div 标签的滚动条，但无论我做什么，SVG缩放以适合 div.

如果我知道图像的大小，我可以强制 canvas 为相同大小。有没有什么办法可以直接说：引入 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>

但是 remember，这个是 1191x971，但其他的都是不同的尺寸。无论 SVG 图尺寸的大小如何，我都希望它在不缩放的情况下显示。

这里是 div 标签，我将其放入，我使用 AngularJS 将 URL 值放入对象标签。在这种情况下，我强制 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

尝试：

    width="100%" height="100%"

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

   <!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>

具有 svg 像素尺寸。

Answer 2

现在，您的 SVG 已配置为 scaling/responsive。这是因为两件事。

它有一个viewBox
它没有定义 width 或 height，因此这些属性默认为“100%”。表示其容器的 100%。

如果您希望它不是比例，那么您需要给 <svg> 或 <object> 一个特定的宽度。例如，如果你想让它呈现在 1:1，你需要给它与 viewBox 相同的宽度和高度：

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

或

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

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

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

How to display SVG without any scaling

svg

object

scale