在SVG中添加背景图片 [英] Add background image in SVG

问题描述

我需要在svg中添加背景图片.但是我只得到一个黑色的矩形框，该图像没有显示.如何添加背景图片?

I need to add background image in svg. But I'm getting only black rectangle box, the image is not displaying. How to add the background image?

这是我的代码:

<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中删除了fill:none，该CSS覆盖了与路径:

Correct a syntax error in the path, you are missing a " at the end and remove fill:none from CSS that is overriding the fill attribute used with the path:

完整代码:

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>

这篇关于在SVG中添加背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！