动画 SVG 圆背景图像答案

【问题标题】：Animated SVG Circle Background Image动画 SVG 圆背景图像
【发布时间】：2017-07-08 00:59:12
【问题描述】：

我需要为我的 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 模型。

如果有任何建议，我们将不胜感激。显然，我不确定 filter/defs-pattern 是否应该进入 SVG 或转换

【问题讨论】：

过滤器是不可渲染的元素（我的意思是它们本身），所以从技术上讲，你把它们放在哪里并不重要。按照惯例，它们应该放在<defs> 部分。但是，您没有两个具有相同 id 的过滤器确实很重要 - 您在示例中拥有这些过滤器。
顺便说一句，如果你把你的代码块变成一个有效的minimal reproducible example
感谢@PaulLeBeau 我的实际代码中没有重复的 ID。这 4 种 SVG 配置中的每一种都是独立尝试的。
@PaulLeBeau 我不相信这个问题是你认为这是重复的那个的重复，因为我的 SVG 是动画的，而你认为是 dup 的那个不是动画的。

标签： svg

【解决方案1】：

您的图案填充无法正常工作，原因很简单。这个：

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

【讨论】：

感谢@PaulLeBeau！现在显示图像重复而不是居中。有什么关于背景图片居中的建议吗？
如果您在图片上设置preserveAspectRatio="xMidYMid slice"，它应该在您提供的框中居中。如果您无法解决，请提出一个新问题。