添加颜色和图像以填充 SVG 圆圈答案

【问题标题】：Add color and image to fill of SVG circle添加颜色和图像以填充 SVG 圆圈
【发布时间】：2015-01-30 20:33:57
【问题描述】：

我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。

我现在尝试的是使用以下代码：

<svg>
    <defs>
        <pattern id="visits" height="23" width="14">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/visit.png" height="23" width="14" x="0" y="0"></image>
        </pattern>
    </defs>
    <circle cx="30" cy="39" r="9" fill="url(#visits)"></circle>
</svg>

它用我的背景图片绘制了一个圆圈，但我也想为我的圆圈添加背景颜色 - 我该如何实现？

我正在寻找这样的最终结果：http://www.tiikoni.com/tis/view/?id=4ff44d1 - 红色背景可以更改，白色十字是图像。

【问题讨论】：

纯色和图像会是什么样子？
您好罗伯特，很抱歉没有提供图片。我更新了我的答案@RobertLongson
icons/visit.png 是透明背景上的白色十字吗？
是的，你是对的@RobertLongson

标签： html svg

【解决方案1】：

只需为图案添加红色背景即可。

<svg>
    <defs>
        <pattern id="visits" height="23" width="14">
            <rect height="23" width="14" fill="red"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/visit.png" height="23" width="14" x="0" y="0"></image>
        </pattern>
    </defs>
    <circle cx="30" cy="39" r="9" fill="url(#visits)"></circle>
</svg>

【讨论】：

正是我想要的。在这个例子中，“height”和“width”可以是“100%”。