Question

我想插入多张图片，包括背景色。

<defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1280" height="15">
        <image xlink:href="images/l1gloss.png" x="0" y="0" width="1280" height="15" />
    </pattern>
</defs>

<path id="curve" style="fill:#990000 url(#img1)" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path>

但它呈现出黑色曲线。但如果我从它的工作方式中删除填充颜色或＃img1。现在我想在曲线路径中使用填充颜色和#img。请帮忙。

Answer 1

您无法一起填充颜色和图案的路径。您可以通过创建两个路径来完成此任务。背景颜色的路径应该落后于另一条路径。

<path class="curve" style="fill:#990000" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path> 
<path class="curve" style="url(#img1)" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path>

Answer 2

使用rect将背景颜色组合到图案中，如下所示。（顺便说一句，您在上面的示例代码中有一个未引用的过滤器（f1） - 并且您没有为图像指定纵横比行为 - 在下面更正）

<svg width="100%" height="100%" viewBox=
0 0 2000 2000"">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1280" height="15">
      <rect fill="#ff0000" x="0" y="0" width="1280" height="15"/>  
      <image xlink:href="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" x="0" y="0" width="1280" height="15" preserveAspectRatio="xMinYMin meet"/>

    </pattern>
</defs>

<path id="curve"  d="M1279.919,13 c0,0 -612.618,21.562 -816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" fill="url(#img1)" stroke="none"> </path>

</svg>

将多个图像插入svg路径

2 个答案: