Question

我遇到了扩展SVG文档的问题。它包含在HTML文档中：

<svg class="svg_class">
    <path class="path_class"     
             d="M 403...
             ... 
             ...z"/>
</svg>

我尝试使用CSS扩展它，如下所示：

svg.svg_class {
    height: 100%;
    width: 100%;    
}

......无济于事。我也尝试使用px单位，但这也不起作用。

我可以使用transform: scale(0.1);使其工作，但还有另一种解决方法，例如何时使用img元素指定属性中的维度？

Answer 1

请参阅www.w3.org/TR/SVG/styling.html，第6.16节“用户代理”样式表。您显然需要在height="xxx"标记中提供<svg>，或者使用attr()进行CSS。

Answer 2

使用viewBox元素上的svg属性，它是为此目的而设计的。与preserveAspectRatio结合使用，可以完全控制SVG画布的缩放。

进一步阅读

Justin MacCandless

Making sense of SVG viewBox's madness

参考

Answer 3

如果您想使用svg完全填充浏览器屏幕...

SVG图像在以下情况下填充屏幕：正文style="overflow:hidden"。它包含在DIV（style="position:absolute;top:0px;left:0px;"）中。将SVG宽度/高度设置为 window.innerWidth / innerHeight svg viewBox 属性设置为svg图像的边界框值。

试试这个例子：

<body style='overflow:hidden;background-color:red'>
    <div id="svgDiv" style='position:absolute;top:0px;left:0px;background-color:lightgreen;'>
        <svg id="mySVG">
            <circle id="myCircle" cx="120" cy="180" r="40" fill="red" stroke="black" stroke-width="2" />
            <rect id="myRect" x="220" y="250" width="60" height="60" fill="blue" stroke="black" stroke-width="2" />
            <ellipse id="myEllipse1" cx="900" cy="1200" rx="150" ry="75" fill="yellow" stroke="black" stroke-width="2" />
            <ellipse id="myEllipse2" cx="1900" cy="90" rx="150" ry="75" fill="yellow" stroke="black" stroke-width="2" />
            <ellipse id="myEllipse3" cx="3900" cy="2200" rx="150" ry="75" fill="yellow" stroke="black" stroke-width="2" />
        </svg>
    </div>

然后触发函数onload：

function sizeFull() {
    var svgW=window.innerWidth
    var svgH=window.innerHeight
    var bb=mySVG.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}
document.addEventListener("onload",sizeFull(),false)

SVG无法使用CSS进行缩放

3 个答案:

进一步阅读

参考