Question

我正在寻找一种用纯色和图像填充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 - 可以更改红色背景，白色十字是图像。

Answer 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>

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

1 个答案: