【发布时间】：2015-01-09 12:57:07
【问题描述】：
对于一个网站，我希望创建一个可点击的 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>-link 将其中一个对象括起来似乎不起作用，所以我选择了另一种方法，其中使用透明按钮作为覆盖，使用<rect class="btn" x="0" y="0" width="100" height="100" />（由 RGB in这篇文章：Making an svg image object clickable with onclick, avoiding absolute positioning)
我在这里遇到的唯一问题是我似乎无法在我的 svg 顶部获得透明按钮，即使使用 9999 的 z-index 也是如此。
我正在尝试，但我的问题是：对于我想要实现的目标，这是根据您的最佳实践还是您建议寻找另一个方向？请记住，我想在单击时在 svg 对象上使用 css 动画。
感谢您的建议！
【问题讨论】：
-
如果你添加你现在拥有的代码会更清楚。
标签： svg css-animations svg-animate