将多个图像插入 svg 路径答案

【问题标题】：insert multiple images into svg path将多个图像插入 svg 路径
【发布时间】：2023-04-05 22:33:01
【问题描述】：

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

<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。请帮忙。

【问题讨论】：

标签： jquery css svg

【解决方案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>

【讨论】：

嗨，非常感谢.. 我可以为此使用掩码/剪辑掩码，即

, 如果这是格式，那么我可以在这里用#svgMask 元素屏蔽#maskDiv。这可能吗？

【解决方案2】：

使用矩形将背景颜色组合到图案中，如下所示。（顺便说一句，您在上面的示例代码中有一个未引用的过滤器 (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>

【讨论】：