Question

我已经意识到通过在网上搜索创建自定义形状按钮的方法，svg似乎是唯一的方法。但它有很多兼容性问题。有没有其他方法来创建自定义形状的东西？当然，我的意思是你只能在形状边界内点击。

例如，我需要一个形状像警察徽章的按钮。兼容性问题我的意思是例如Firefox不支持外部css中的svg。至少这就是我所知道的。我希望我可以避免剪辑路径

Answer 1

我不知道你的意思＆＃34; Firefox在外部css＆＃34;中不支持svg。以及这会影响你想做什么。您可能需要更好地解释您的要求。

以下是自定义按钮的示例。它应该适用于所有中等规模的浏览器。

＆＃13;

<svg width="200" height="200">
  <a xlink:href="http://www.google.com" target="_blank">
    <polygon points="100,0 200,50 170,170 100,200 30,170 0,50"/>
  </a>
</svg>

＆＃13;

<强>更新

使用剪贴路径和路径的新示例，表示不相信OP：

＆＃13;

<svg width="200" height="200">
  <defs>
    <clipPath id="cp">
      <path d="M100,0 L200,50 170,170 100,200 30,170 0,50 Z"/>
    </clipPath>
  </defs>
  
  <a xlink:href="http://www.google.com" target="_blank">
    <image width="200" height="200" xlink:href="http://lorempixel.com/200/200/" clip-path="url(#cp)"/>
  </a>
</svg>

＆＃13;

是否可以创建一个没有svg的自定义形状按钮？

1 个答案: