像嵌入 img 标签一样拉伸 SVG 内联标签答案

【问题标题】：Stretch SVG inline tag as when embedded with img tag像嵌入 img 标签一样拉伸 SVG 内联标签
【发布时间】：2014-08-01 23:44:36
【问题描述】：

在一个页面中，我在 html 中直接嵌入了一个 svg 图像，我希望这个 svg 在响应式设计中始终保持 100% 宽度并保持原始比例。

我尝试使用 preserveAspectRatio，但我无法拉伸宽度图像以保持比例，这与嵌入带有 img 标签的图像和一个外部 svg 文件。

See the example on jsfiddle

    <h2>A) Svg embedding an svg element directly in the HTML:</h2>
    <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        width="200px"
        height="300px"
        viewBox="0 0 200 300"
        preserveAspectRatio="xMinYMin"
        xml:space="preserve" style="background-color:#000; width: 100%;">

        <line fill="none" stroke="#E32A2D" stroke-width="6" stroke-miterlimit="10" x1="16.3" y1="247.1" x2="39" y2="258.7"/>
        <line fill="none" stroke="#E32A2D" stroke-width="6" stroke-miterlimit="10" x1="39" y1="258.8" x2="61.8" y2="270.2"/>
        <path fill="none" stroke="#E32A2D" stroke-width="6" stroke-miterlimit="10" d="M61.9,270.3c7.6,3.8,15.2,7.6,22.8,11.3"/>
        <path fill="none" stroke="#E32A2D" stroke-width="6" stroke-miterlimit="10" d="M84.8,281.6c3.8,1.8,7.7,3.7,11.5,5.5c1,0.5,1.9,0.8,3,1.2c0.5,0.2,1,0.5,1.6,0.3c0.6-0.1,1-0.2,1.6-0.3c2.1-0.4,4.2-0.9,6.2-1.4"/>
        <path fill="none" stroke="#E32A2D" stroke-width="6" stroke-miterlimit="10" d="M108.6,287c8.3-1.8,16.5-3.9,24.8-5.9"/>
        <line fill="none" stroke="#E32A2D" stroke-width="6" stroke-miterlimit="10" x1="133.5" y1="281.1" x2="158.2" y2="275"/>
    </svg>

    <h2>B) Svg using img element:</h2>
    <img src="image.svg" width="100%">

我希望示例 A 具有与示例 B 相同的行为，但如何？

至少应该在 Chrome 和 Safari 上可见

【问题讨论】：

标签： html css svg

【解决方案1】：

在您的 ViewBox 元素中，您将不得不使用数字来适应它。

viewbox 属性有以下属性：

min-x min-y width height

但这在它自己的网格系统范围内在 svg中。

这篇文章应该会有所帮助。

Madness with SVG viewbox

【讨论】：

在 chrome 中对我来说很好。
在宽大的窗口中查看。这是您的代码版本的 jsfiddle 嵌入式视图：jsfiddle.net/manzapanza/w2rJA/1/embedded/result 我在 Firefox Mac/Win 上对其进行了测试，并且可以正常工作，但是.. 在 Chrome Mac/Win/Android 上，Safari Mac/iOS 很遗憾不起作用
您的图像未显示，您想要的结果是什么？一个跨越 100% 的非常高的图像？
图像应该拉伸到可用宽度的 100% 并且“自动”以按比例计算高度。当嵌入带有 img 标签和 width="100%" 的 svg 时会发生这种情况跨度>
重新回答帮助。不是确切的解决方案，但它会让您找到正确的解决方案。