Question

我正在尝试使用包含图像的图案填充SVG形状。 SVG设置为按比例填充其容器但我想停止图案缩放，因此纹理/分辨率对于所有尺寸保持不变。 SVG代码直接写入HTML

<!doctype html>
<html lang="en">
<head>
    <title>SVG Test</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <style>
        body {
            background-color: #000;
        }

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

</head>
<body>

<div style="width: 600px;">
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve" width="390" height="390">
        <g id="facebook" fill="url(#chalk-white)">
            <path class="st0" d="M195,0C87.3,0,0,87.3,0,195s87.3,195,195,195s195-87.3,195-195S302.7,0,195,0z M258.1,97.4l-27.5,0
                c-21.6,0-25.8,10.3-25.8,25.3v33.2h51.5l-6.7,52h-44.8v133.3h-53.7V207.8h-44.9v-52h44.9v-38.3c0-44.5,27.2-68.7,66.8-68.7
                c19,0,35.3,1.4,40.1,2V97.4z"/>
        </g>
    </svg>
</div>

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="chalk-white" patternUnits="userSpaceOnUse" width="600" height="329">
            <image xlink:href="img/chalk-white.png" x="0" y="0" width="600" height="329" />
        </pattern>
    </defs>
</svg>

</body>
</html>

指向更完整版本的链接位于：http://whiterockbrewery.gg/dev/svgtest.html

如您所见，背景图像随图标缩放。我是否可以禁用此缩放效果，在所有图标上保持图像（纹理）的大小相同，并在需要时将其平铺？

我可以通过创建不同的模式定义并更改它们的宽度和高度属性来实现它的一半 - 它们的一半并且您有效地将文本的分辨率加倍，因此可以将其应用于更大的图标并保持一定的质量。但是，这个解决方案有点麻烦，并且对于可能需要在屏幕尺寸变化或可能在Illustrator中以错误尺寸制作的SVG进行大幅缩放的项目不能很好地工作。

Answer 1

好的，再看一下。这是你的问题。你在CSS中调整SVG的大小为100％/ 100％，这就是缩放div的内容，以便一切都被压缩。 SVG片段不知道它们的HTML容器正在按比例放大和缩小，因此您在SVG模式属性中所做的任何操作都不会影响任何内容。

当您在纯SVG中执行所有操作 - http://codepen.io/mullany/pen/rtjeL时 - patternUnits工作得很好 - 固定纹理大小填充不同大小的内容。

如果要更改此设置，则需要在SVG中添加模式转换属性，以“反转”HTML容器缩放的缩放效果。或者你可以在SVG中进行缩放。

Answer 2

或者，您可以通过img标记链接svg，从而允许任何类型的大小调整（也使其响应）。我不确定图像模式填充是否仍然有效。我尝试时似乎只是透明了。值得一试。

使用图像模式填充缩放SVG

2 个答案: