使用SVG子

Question

我正在尝试将SVG元素放在具有现有内容的div中。 SVG应该占用整个div。这是一些代码：

<div style="overflow: hidden; background-color: red; width: 100px; height: 50px;">Button
    <svg style="width: 100%; height: 100%;">
        <rect cx="0" cy="0" width="100%" height="100%" fill="#00ff00"></rect>
    </svg>
</div>

Fiddle

如您所见，svg（绿色）位于按钮标签下方。我希望它能够延伸以填充整个父div。

我的第一个想法是使用SVG的绝对定位，并使用顶部，左侧，右侧，底部将其拉伸到父级内部。问题是我无法根据我的要求将父div位置设置为相对或绝对。我也不控制div的孩子，他们可以是任何东西。

给你一些上下文：我正在尝试创建一个库，当用户点击它时，它会在按钮内播放动画。因此，SVG元素动态附加到目标元素，我不能对这些元素的定位方式以及它们是否有子元素做出任何假设。