Question

我需要在SVG圈中添加背景图片。但是，到目前为止我没有尝试过任何事情。

这是我迄今为止所尝试过的......

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">                     
    <defs>
        <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px">
            <image x="0" y="0"height="40px" width="40px" xlink:href="url.png"></image>
        </pattern>
    </defs>
    <g transform="translate(40,40)">
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image)"></circle>
    </g>
</svg>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">      
    <g transform="translate(40,40)">               
        <defs>
            <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px">
                <image x="0" y="0" height="40px" width="40px" xlink:href="url.png"></image>
            </pattern>
        </defs>
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image)"></circle>
    </g>
</svg>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">           
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="url.png"/>
    </filter>   
    <g transform="translate(40,40)">  
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#this_image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#this_image)"></circle>
    </g>
</svg>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">      
    <g transform="translate(40,40)">          
        <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
            <feImage xlink:href="url.png"/>
        </filter>
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#this_image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#this_image)"></circle>
    </g>
</svg>

这是一个jsfiddle模型。

不胜感激任何建议。显然，我不确定滤波器/ defs模式是否应该进入SVG或变换

Answer 1

由于一个简单的原因，您的图案填充不起作用。这样：

circle { ... fill:none; ... }

动画SVG圆圈背景图像

1 个答案: