SVG路径背景

Question

我想用背景图像（仅在白色区域）替换中间的绿色形状。

Image with a green shape

对于该图像，我希望能够设置CSS属性（或SVG等效项），例如背景位置：xx％xx％和transform：scale（xx）。这些功能可以在任何方向上更改图像位置，并可以放大或缩小图像。

我已经尝试过使用路径模式，但这并不成比例，而且也不美观：

See what I tried

我想保留蓝色边框，只将图像放在白色圆圈的中间。

Answer 1

部分困惑可能是您将图像放置在if (v.getId() == R.id.openPictureBtn) { ... } else if (v.getId() == R.id.openCameraBtn) { ... }组中，这些组已对其进行了转换。如果将图像移到这些<g>元素之外，则坐标将更易于处理。

现在，（至少）有两种方法可以将图像切成一个圆形并将其放置在所需位置：

1. 使用填充为<g>的路径（类似于您的示例）。
2. 将<pattern>/<image>元素与<image>一起使用。

在此SVG末尾查看有关这些替代方案的评论：

clip-path

设置了缩放比例和位置的位置