Question

所以我真的需要在SVG中为每个单独的路径ID创建自己的按钮。我试过添加每个标签，但它实际上只是使整个svg消失。

请帮助！

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="262px" height="644px" viewBox="128 65.25 262 644" enable-background="new 128 65.25 262 644" xml:space="preserve">
<g id="skull">
<path id="skull" opacity="0.5" fill="#5CCAE8" enable-background="new    " d="M237.026 122.5 c1.92 7.2 3.3 7.6 3 10.028c-0.341 2.388-0.375 10.5 10.1 11.58c10.522 1.1 22.9 1.6 26.282-5.134 c0 0 1.338-8.834 2.817-10.267c1.479-1.433 0.765-4.775 1.958-6.208c1.192-1.433 3.485-23.877-1.958-32.233 c-5.444-8.357-7.435-12.655-21.124-12.655c-13.69 0-19.059 8.118-20.193 10.028c-1.137 1.91-1.455 5.253-2.251 6.5 c-0.795 1.273-1.113 6.048-1.272 7.958c-0.16 1.9 0 14.5 0.8 16.873C236.002 121.4 237 122.5 237 122.477z"/></g>
<g id="humerus">
    <path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new    " d="M190.635 197.309c-2.093-5.987-1.962-8.47-0.813-10.126 c1.147-1.655 0.957-1.908 3.312-2.478c2.356-0.57 3.695-1.97 5.67-1.458c1.973 0.5 3.3 0.7 5.6 3.8 c2.289 3.1 0.8 5.3 0.8 5.35s-2.737 0.059-3.824 2.86c-1.086 2.8-2.602 43.292-3.114 45.3 c-0.512 1.973-3.397 17.25-3.02 20.943c0.378 3.7 4.7 19.6 4.8 21.845c0.124 2.3 1.5 5.67-3.638 6.3 c0 0 0.7 2.516-1.503 2.243c-2.192-0.273-4.356-1.041-6.52-1.808c-2.163-0.767-7.004-0.327-6.808-3.256 c0.194-2.929-0.565-5.54 2.876-8.911c3.442-3.371 5.869-32.016 6.592-37.428S190.635 197.3 190.6 197.309z"/>
    <path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new    " d="M326.388 196.912c2.059-5.999 1.914-8.481 0.758-10.129 c-1.158-1.647-0.97-1.903-3.329-2.46c-2.359-0.556-3.706-1.948-5.678-1.424c-1.97 0.524-3.307 0.724-5.577 3.8 c-2.27 3.072-0.788 5.354-0.788 5.354s2.738 0 3.8 2.838c1.102 2.8 2.9 43.3 3.4 45.2 c0.524 2 3.5 17.2 3.1 20.926c-0.356 3.697-4.573 19.58-4.686 21.873c-0.111 2.293-1.424 5.7 3.7 6.3 c0 0-0.675 2.5 1.5 2.234c2.191-0.286 4.35-1.065 6.511-1.843c2.156-0.781 7.001-0.369 6.79-3.296 c-0.213-2.927 0.533-5.542-2.929-8.895c-3.462-3.35-6.054-31.981-6.808-37.389C325.444 234.6 326.4 196.9 326.4 196.912z"/>

</svg>

Answer 1

尝试分解，这样您就不会尝试在一个SVG标记中执行所有操作。 SVG标签基本上应该是您创建按钮的画布 - 您可以在SVG标签中嵌入形状和文本，并分配ID，以完成剩下的工作。这是一个代码示例，并链接http://www.w3.org/TR/SVG/struct.html#SVGElement：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

如何使单个SVG ID成为按钮

1 个答案: