Question

我已经进行了一些搜索，但是无法弄清楚。我希望可以将<a>标签和<svg class="triangle-animation" width="85" height="85"> <polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/> <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/> <polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/> <a href="about.html"></a> </svg>标签放在两个svg标签之间，以创建一个按钮，但是到目前为止，它还没有起作用。我当时在想什么：

SomeAbstractClass obj = new SomeAbstractClass(...);

但是没有运气。我还尝试将一些文本放在a标记内，但它甚至没有出现。到目前为止，我一直在寻找的指南没有太大帮助。我是网页设计的新手，我只是想让自己的个人网页继续发展。

svg在彼此向下的方向上绘制三个三角形。我要寻找的行为是它们吸引了人们的注意，单击该页面时便跳至主要内容。感谢您的帮助！

Answer 1

请尝试将代码包装在svg周围。

override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool
{
    if  action == #selector(self.paste(_:))
        ||
        action == #selector(self.copy(_:))
        ||
        action == #selector(self.cut(_:))
        ||
        action == #selector(self.select(_:))
        ||
        action == #selector(self.selectAll(_:))

    {
        return false
    }
    return super.canPerformAction(action, withSender: sender)
}

Answer 2

使用来包装svg并设置其样式

.SvgButton{
  padding: 5px;
  border: 1px solid red;
  display: flex;
  width: 50px;
}

<a class="SvgButton" href="#"><svg class="triangle-animation" width="85" height="85">
                        <polygon points="0,25 25,50, 50,25" fill="rgba(255,0,0,.3)"/>
                        <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(0,255,255,.5)"/>
                        <polygon points="0,0 25,25, 50,0" fill="rgba(255,0,255,.8)"/>
                        <path d="M27 64c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm9-.449s-4.252 8.449-11.985 8.449c-7.18 0-12.015-8.449-12.015-8.449s4.446-7.551 12.015-7.551c7.694 0 11.985 7.551 11.985 7.551zm-7 .449c0-2.757-2.243-5-5-5s-5 2.243-5 5 2.243 5 5 5 5-2.243 5-5z"/>
                    </svg></a>

Answer 3

更好的解决方案是使用svg符号定义-> look
您可以更轻松地管理图标。

.icon {
      width: 50px;
      height: 50px;
    }

    .animation {
      display: flex;
    }

    .mail {
      background-color: #dc4e41;
      fill: #fff;
    }

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="triangle-animation" viewBox="0 0 50 50">
      <path fill="rgba(255,0,0,.3)" d="M0 25l25 25 25-25z" />
      <path fill="rgba(0,255,255,.5)" d="M0 12.5l25 25 25-25z" />
      <path fill="rgba(255,0,255,.8)" d="M0 0l25 25L50 0z" />
    </symbol>
    <symbol id="share-icon-mail" viewBox="-7 -6 42 42">
      <path
        d="M26 23.5v-12a8.408 8.408 0 0 1-1.078 1.031c-2.234 1.719-4.484 3.469-6.656 5.281-1.172.984-2.625 2.188-4.25 2.188h-.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281A8.411 8.411 0 0 1 2.001 11.5v12c0 .266.234.5.5.5h23c.266 0 .5-.234.5-.5zm0-16.422C26 6.687 26.094 6 25.5 6h-23c-.266 0-.5.234-.5.5 0 1.781.891 3.328 2.297 4.438a980.43 980.43 0 0 1 6.266 4.953c.828.672 2.328 2.109 3.422 2.109h.031c1.094 0 2.594-1.437 3.422-2.109a946.207 946.207 0 0 1 6.266-4.953c1.016-.797 2.297-2.531 2.297-3.859zm2-.578v17c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 0 1 0 23.5v-17C0 5.125 1.125 4 2.5 4h23C26.875 4 28 5.125 28 6.5z">
      </path>
    </symbol>
  </svg>
  
  
  <a href="about.html">
    <svg class="icon animation">
      <use xlink:href="#triangle-animation"></use>
    </svg>
  </a>

  <svg class="icon mail">
    <use xlink:href="#share-icon-mail"></use>
  </svg>

使用SVG图像作为按钮/链接

3 个答案: