将另一个SVG嵌入到路径中

Question

我有一个六边形的路径。我需要为六边形的背景颜色设置动画，六边形需要包含另一个SVG图标。

这样的事情（我知道这不是它的工作原理）：

<svg id="hexagon">
    <path fill="animatedColor">
        <svg id="icon"></svg>
    </path>
</svg>

正如您所见，我无法定义用于填充的模式，这就是问题所在。我无法使用精确的宽度，因为整体本身就是一个响应式六边形网格，它是在页面加载时生成的。

或者有没有办法像CSS一样同时拥有背景图像和颜色？