相关疑难解决方法(0)

我想在大小非本机时有一个内联svg元素的内容比例.当然,我可以把它作为一个单独的文件,并像这样扩展它.

index.html的: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

但是,我想通过CSS向SVG添加其他样式,因此不能选择连接外部样式.如何制作内联SVG比例？

目标是使<svg>元素扩展到其父容器的大小,在这种情况下为a <div>,无论容器有多大或多小.

代码:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

这个问题最常见的解决方案似乎是viewBox在<svg>元素上设置属性.

viewBox="0 0 widthOfContainer heightOfContainer"

但是,在元素中的<svg>元素具有预定义的宽度和/或高度的情况下,这似乎不起作用.例如,<rect>上面代码中的元素明确设置了其宽度和高度.

所以显而易见的解决方案是在这些元素上使用%widths和%high.但这甚至必须要做吗？特别是,因为<img src=test.svg >工作正常并且扩展/收缩而没有明确设置<rect>高度和宽度的任何问题.

如果元素<rect>和像它一样的其他元素必须以百分比定义它们的宽度和高度,那么在Inkscape中有一种方法可以设置它,以便<svg>文档中的所有元素都使用百分比宽度,高度等.而不是固定尺寸？

我将SVG徽标定义为符号,如下所示:

<svg class="SpriteSheet">
    <symbol id="icon-logo" viewBox="-12 -79.61 407.19 108.36">
        <path id="logo-upperLeft" d="M0-67.61l83.66 0 0-10 -93.66 0 0 30.92 10 0Z" transform="translate(-2 -2)"></path>
        <path id="logo-upperRight" d="M383.19-67.61l-83.66 0 0-10 93.66 0 0 30.92 -10 0Z" transform="translate(2 -2)"></path>
        <path id="logo-lowerLeft" d="M0 16.75l83.66 0 0 10 -93.66 0 0-30.92 10 0Z" transform="translate(-2 2)"></path>
        <path id="logo-lowerRight" d="M383.19 16.75l-83.66 0 0 10 93.66 0 0-30.92 -10 0Z" transform="translate(2 2)"></path>
    </symbol>
</svg>

此定义包含在顶部body和样式中display:none.

在文档的后面,我以这种方式使用徽标:

<header class="Header">
    <h1 class="Header-headline">
        <a href="/">
            <svg class="Header-logo">
                <use …