在 SVG 中添加背景图像答案

【问题标题】：Add background image in SVG在 SVG 中添加背景图像
【发布时间】：2018-06-26 05:41:55
【问题描述】：

我需要在 svg 中添加背景图片。但我只得到黑色矩形框，图像没有显示。如何添加背景图片？

这是我的代码：

<style>
    path {
        fill: none;
        stroke: #000;
        stroke-width: 3px;
        stroke-linejoin: round;
        stroke-linecap: round;
    }
</style>

<svg width="1000" height="700">
    <!-- <rect fill="#fff" width="100%" height="100%"></rect> -->

    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">
            <image xlink:href="home/nayana/Documents/Text Editor Files/abstract-hd.jpg" width="600" height="450" />             
        </pattern>
    </defs>
    <path d="M5,5 l0,680 l980,0 l0,-680 l-980,0 fill="url(#img1)" />
</svg>

提前致谢

【问题讨论】：

那个文件夹名是带空格的，所以我在代码中给了空格

标签： css svg background-image

【解决方案1】：

现在最简单的用法就是<image href="bgnd.png"/>。这也可以取 x、y、宽度、高度。 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

【讨论】：

【解决方案2】：

更正路径中的语法错误，您在末尾缺少 "，并从覆盖路径使用的填充属性的 CSS 中删除 fill:none：

完整代码：

path {
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

<svg width="1000" height="700">
    <!-- <rect fill="#fff" width="100%" height="100%"></rect> -->

    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">
                    <image xlink:href="https://lorempixel.com/600/450/" width="600" height="450" />             
            </pattern>
    </defs>
    <path d="M5,5
        l0,680 l980,0 l0,-680 l-980,0"          
        fill="url(#img1)" />
</svg>

【讨论】：

现在我更正了我的语法。它现在工作。谢谢@Temani Afif