图像图案到SVG路径显示拉伸

Question

我有一个矩形div，在其中添加了background-color和background-image并重复播放，这样半透明的图像会与背景色融合在一起，并为内容创建彩色图案背景。我从SubtlePatterns那里选取了一个模式：维度为300px × 295px。这是代码：

#nd {
    background-image: url('../images/dark-mosaic.png');
    background-color: #b33939;
    color: #fff;
}

现在，我想使矩形更平滑一些，因此我从this link中提取了SVG分隔符。使用this answer制作SVG路径背景图片。使用以下代码：

<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="300" height="295">
            <image xlink:href="{{ asset('images/dark-mosaic.png') }}" x="0" y="0" width="300" height="295" />
        </pattern>
    </defs>
    <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#img1)"></path>
</svg>

我最终得到了带有拉伸/填充背景图像的SVG形状：

我咨询了this link并将<image>标签的width和height属性固定为图像文件的宽度和高度，但是我失败了。

现在我有两个问题：

• 如何使背景图像完全像矩形一样平铺？
• 如何为形状添加填充颜色，以使SVG图案与矩形中的图案匹配？

Answer 1

与其使用section元素和svg元素来尝试匹配两个元素的模式，不如使用section和clipPath来裁剪section根据需要。

我正在使用的“模式”的路径具有fill =“ black”。 section有background-color: skyBlue;

请注意，clipPath正在使用clipPathUnits="objectBoundingBox"，并且d属性的值从0到1。

#nd {
  height:300px;
  background-color:skyBlue;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='black'%3E%3Crect x='0' y='0' width='20' height='20'/%3E%3Crect x='20' y='20' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E");
   -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">  
            <path d="M0 .5 C .20 0 .50 0 1 .5 v.5H0Z"></path>
        </clipPath>
      </defs>
</svg>
<section id="nd"></section>

对于background-image，我使用的是data：Uri图像，但是您可以使用外部图像。

如果您查看用作图像的svg，则会看到此图像（不是图案！）。由于css默认情况下会重复图像，因此您不需要图案，只需重复图像即可。

<svg viewBox='0 0 40 40' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g fill="black">
        <rect x='0' y='0' width='20' height='20'/>
        <rect x='20' y='20' width='20' height='20'/>
    </g>
</svg>

希望您会对此有所帮助。