Question

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

我尝试使用 preserveAspectRatio 进行游戏但是我无法拉伸宽度图像，保留比例的方式与我在嵌入图像时完全相同一个img标签和一个外部svg文件。

    <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

上显示

Answer 1

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

viewbox属性具有以下属性：

min-x min-y width height

但这是在svg内内的网格系统的范围内。

本文应该有所帮助。

Madness with SVG viewbox

在嵌入img标记时拉伸SVG内联标记

1 个答案: