Question

我以前从未使用过SVG，但是能够创建我需要的这种形状。两个三角形，每个都有一个图像。：

function sanitizeWord(word) {
  let result;
  const re = /(\w+)/g.exec(word.toLowerCase().trim());
  if(re) {
    result = re[1];
  }
  return result;
}

function analyze(str) {
  let result = {};
  str.split(" ").forEach((word) => {
    word = sanitizeWord(word);
    if(word) {
      if (result.hasOwnProperty(word)) {
        result[word] = result[word] + 1;
      } else {
        result[word] = 1;
      }
    }
  });
  return result;
}

console.log(analyze("This, . is a test! test this this"));

然而，现在我希望将这些图像中的每一个链接到某个东西。我尝试在图像和多边形标签周围添加<svg viewbox="0 0 10 6.7"> <defs> <clipPath id="top"> <polygon points="0 0, 9.9 0, 0 6.6" /> </clipPath> <clipPath id="bottom"> <polygon points="10 0.1, 10 6.7, 0.1 6.7" /> </clipPath> </defs> <image xlink:href="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)" data-state='top'/> <image xlink:href="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)" data-state='bottom'/> </svg>，但这不起作用。

那么，如何在此SVG中创建两个单独的链接（每个多边形一个）？

Answer 1

图片周围的

<a>标签适合我;也许你没有正确关闭它们？

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <a xlink:href="http://ebay.com">
    <image xlink:href="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)" data-state='top'/>
  </a>
  <a xlink:href="http://amazon.com">
    <image xlink:href="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)" data-state='bottom'/>
  </a>
</svg>

SVG有两种形状，两个可点击的链接

1 个答案: