对于一个网站，我正在寻找创建一个可点击的svg（我很想发布一个图像，但我显然需要信用 - 一个耻辱 - svg图像发布在代码belo），一个中央的图像圆圈和围绕它的7个圆圈，当我点击其中一个周围的圆圈时，左侧出现一个带有信息的区域，并且该圆圈与其他一些相互依赖的圆圈一起放大。直到现在我没有动画svg的经验，但我渴望学习。
从我读到的，我假设我将使用<object>标签嵌入svg但我需要在svg中单独制作单独的对象。所以我决定使用<svg>里面的所有代码，这样我就可以更好地控制html中的元素了：
`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Laag_1" x="0px" y="0px" viewBox="0 0 282.7 273.8" enable-background="new 0 0 282.7 273.8" xml:space="preserve">
<g>
<circle fill="none" stroke="#07A2D3" stroke-miterlimit="10" stroke-dasharray="1.998,1.998" cx="141.7" cy="137.5" r="95.4"/>
<rect class="btn" x="0" y="0" width="100" height="100" onclick="function(){};" />
</g>
<circle fill="#07A2D3" cx="141.7" cy="137.5" r="48.3"/>
<circle fill="#B1DEEA" cx="141.7" cy="43.9" r="27.7"/>
<circle fill="#B1DEEA" cx="68.4" cy="79.3" r="27.7"/>
<circle fill="#B1DEEA" cx="50.5" cy="158.5" r="27.7"/>
<circle fill="#B1DEEA" cx="101.4" cy="221.9" r="27.7"/>
<circle fill="#B1DEEA" cx="182.7" cy="221.6" r="27.7"/>
<circle fill="#B1DEEA" cx="233" cy="157.7" r="27.7"/>
<circle fill="#B1DEEA" cx="214.4" cy="78.6" r="27.7"/>
<text transform="matrix(1 0 0 1 125.8164 134.4912)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">digital</tspan><tspan x="-10" y="14.4" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">revolution</tspan></text>
<text transform="matrix(1 0 0 1 126.6628 47.0657)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">mobility</text>
<text transform="matrix(1 0 0 1 204.0706 81.8103)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">cloud</text>
<text transform="matrix(1 0 0 1 218.6055 160.0701)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">big data</text>
<text transform="matrix(1 0 0 1 162.8337 214.0465)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">enterprise</tspan><tspan x="-2" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">application</tspan><tspan x="-1.9" y="21.6" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">integration</tspan></text>
<text transform="matrix(1 0 0 1 86.6699 216.3144)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">content</tspan><tspan x="-10.6" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">management</tspan></text>
<text transform="matrix(1 0 0 1 31.4218 155.9787)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">enterprise</tspan><tspan x="7.9" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">portal</tspan></text>
<text transform="matrix(1 0 0 1 60.4614 69.8347)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">user</tspan><tspan x="-12.7" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">experience</tspan><tspan x="-4.7" y="21.6" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">design</tspan></text>
</svg>
`
使用<a> - 链接封闭其中一个对象似乎不起作用所以我选择了另一种方法，使用<rect class="btn" x="0" y="0" width="100" height="100" />将透明按钮用作叠加层（在这篇文章中由RGB提供：Making an svg image object clickable with onclick, avoiding absolute positioning）
我遇到的唯一问题是，我似乎无法在我的svg顶部获得透明按钮，甚至在使用9999的z-index时也是如此。
我正在尝试解决问题，但我的问题是：对于我想要达到的目标，这是根据你的最佳实践还是你建议寻找另一个方向？请记住，我想在点击时在svg objcets上使用css动画。
感谢您的建议！