Html 是否可以使用SVG比例来适应父级，保持静态填充大小？

我正在尝试使用svg创建一个纸张纹理外观，我已经做得相当好了，使用透明覆盖将纹理添加到它下面svg项的基本颜色上

但是，我注意到纹理随着SVG进行缩放。由于图像设置为页面的宽度，因此在大型监视器上，图像会变得非常拉伸，看起来不太好看

是否可以使用固定大小的填充模式自动缩放svg资产

下面是一个带有完整示例的代码笔：

编辑：使用实际svg更新了代码笔，而不是理论上的代码笔

如果SVG可以从中心拉伸填充平铺，则会获得额外的积分。谢谢

这就是SVG当前的外观，但是纹理会随着SVG而缩放

.overlay{fill:url（#img1）；fill不透明性：1；}
.圆圈{fill:#62B4B8；}

是的，你能做到。但是您需要删除viewBox

然后，如果将

的宽度和高度设置为

100%

，则可以将SVG设置为任意大小，模式将重复并填充整个SVG

#svg1{
宽度：100px；
高度：100px；
}
#svg2{
宽度：250px；
高度：250px；
}

---

正如杰西·克纳汉评论的那样。你为什么不使用背景图像呢

（笔在这里->）

创建一个名为pattern.svg的空文件（或其他文件）。然后将您的svg代码粘贴到其中，并添加svg标题之类的内容

<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="pattern" viewBox="0 0 100 100"><defs><pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="5" fill="#0000ff" /></pattern></defs><rect x="0" y="0" width="100" height="100" style="fill: url(#pattern2);" /></svg>

我已经从图像中删除了笔划，稍后我会将其添加到div中。我们不希望中风重复

然后保存新的svg图像文件，并像css中的普通背景图像一样使用它。即

<div id="circles"></div>

<style>
    #circles {

        //always center the circles within the box
        background-position:center;

        //change this to change the size of the circles
        background-size:100px 100px; 

        //point this to where you saved your new svg image
        background-image:url(http://urbanise.net.au/pattern.svg); 

        //set the width of the box
        width:100%; 

        //set the height
        height:500px; 

        //add the border back in
        border:5px solid #000; 

    }
</style>

#圈{
//始终使方框内的圆圈居中
背景位置：中心；
//更改此选项可更改圆的大小
背景尺寸：100px 100px；
//将此点指向保存新svg图像的位置
背景图片：url(http://urbanise.net.au/pattern.svg); 
//设置框的宽度
宽度：100%；
//设定高度
高度：500px；
//重新添加边框
边框：5px实心#000；
}

---

工作起来很有魅力：）

我终于找到了一个相对不错的解决办法，使用css媒体查询

因为您可以在svg中嵌入css媒体查询（它将根据svg的大小应用，就像通过img标记显示时一样），所以我可以将不同比例的模式设置为填充元素

如果我在

标记中有10种不同的缩放模式，需要匹配媒体查询，我不知道内存折衷是什么，但这对于我的应用程序来说已经足够好了，开销可以忽略不计。由于引用的图像相同，因此只需加载一次

更新的代码笔：

.overlay{fill:url（#tsmall）；fill不透明性：1；}
.圆圈{fill:#62B4B8；}
@介质（最大宽度：1000px）{
.overlay{fill:url（#tlarge）；}
}

@RobertLongson你有这样的例子吗？我确信它们可以嵌入，只是想检查一下。谢谢有什么理由不想使用背景图像吗？它很容易居中和平铺。@JesseKernaghan主要原因是，实际的svg不是矩形，而是带有“剪纸”的多边形edges@mix3d如果这样的更改会使任何现有答案无效，那么在问题有答案后，你就不能真正更改它。但是实际问题没有更改，只是举个例子？我意识到第一个示例代码是一个错误的诽谤者，并朝着一个意外的方向发展。。。我应该删除然后再问这个问题吗？谢谢你的回答！但是，使用svg作为背景图像对我不起作用的原因是，我需要处理的实际对象不是矩形，我只是将其用作“快速编写问题”的示例。我已经用我正在使用的实际SVG更新了我的代码笔；svg形状本身需要背景纹理如果我只需要担心重叠部分（而不是圆），那么我可以使顶部和底部完全笔直，然后在svg上方有一个绝对定位的DIV，并在那里使用背景纹理。。。嗯，这可能是一个很好的退路。我预计viewbox可能是一个可以查看的地方，但我不确定如何获取具有定义顶点的多边形并将其转换为基于百分比的点。等等，是否可以将顶点中的所有点设置为百分比？我现在要试试，我试过了，但我认为%点作为多边形顶点不起作用。不能在

或

中使用百分比坐标。

<div id="circles"></div>

<style>
    #circles {

        //always center the circles within the box
        background-position:center;

        //change this to change the size of the circles
        background-size:100px 100px; 

        //point this to where you saved your new svg image
        background-image:url(http://urbanise.net.au/pattern.svg); 

        //set the width of the box
        width:100%; 

        //set the height
        height:500px; 

        //add the border back in
        border:5px solid #000; 

    }
</style>