Question

我正在忙于一个网站，在主页上我需要有两个可点击的部分，其中一部分将带您进入公司的一个专业化，另一部分将带您进入其他专业领域。

我创建了一个正方形图像，通过中心分割成两个直角三角形，当你点击它时，我需要顶部的一个链接转到一个链接，而另一个链接转到另一个链接。我做了一些研究，我发现使用 SVG 是实现这一目标的最佳选择，特别是因为它必须有响应但我没有运气。

我尝试在xml中编码三角形，然后将xml:href链接添加到三角形，但这不起作用。

我还尝试过使用Inkscape的多个内容但没有结果，它会使可点击的位置变小或图像变得无法响应。

我现在感谢Paul LeBeau：

<!DOCTYPE html>
<html>
    <body>

        <svg viewBox="0 0 400 300">

        <image xlink:href="image.jpg" x="0" y="0" height="100%" width="100%"/>

            <a xlink:href="http://www.example.com">
                <polygon points="0,0, 400,0, 0,300"/>
            </a>

            <a xlink:href="http://www.google.com">
                <polygon points="400,0, 400,400, 0,300"/>
            </a>

        </svg>

    </body>
</html>

我必须将它嵌套在html中，因为这是我的服务器端托管所需要的。运行此代码时会发生什么情况，它的工作原理，响应性和链接工作，但图像不显示它只显示黑色方块。

在尝试找出解决方案的过程中，我注意到一些图像来自黑色，所以我尝试了以下内容：

<!DOCTYPE html>
<html>
    <body>

        <svg viewBox="0 0 400 300">

            <a xlink:href="http://www.example.com">
                <polygon points="0,0, 400,0, 0,300"/>
            </a>

            <a xlink:href="http://www.google.com">
                <polygon points="400,0, 400,400, 0,300"/>
            </a>

        <image xlink:href="image.jpg" x="0" y="0" height="100%" width="100%"/>

        </svg>

    </body>
</html>

然后显示带有一些黑色低谷的图像，但链接不起作用。

在考虑了一下之后，我决定将我的三角形分成没有背景的.png图像，并决定将它们与xml:href和图像标签一起添加到三角形的<a>标签中并包裹这一切都在一些定位CSS。这是代码：

<!DOCTYPE html>
<html>
    <body>

    <style>
    #positioning {
        position: relative;
        float: center;
    }
    </style>

        <div id="positioning">

        <svg viewBox="0 0 400 300">

            <a xlink:href="http://www.example.com">
                <polygon points="0,0, 400,0, 0,300"/>
                <image xlink:href="image1.png" x="0" y="0" height="100%" width="100%"/>
            </a>

            <a xlink:href="http://www.google.co.za">
                <polygon points="400,0, 400,400, 0,300"/>
                <image xlink:href="image2.png" x="0" y="0" height="100%" width="100%"/>
            </a>

        </svg>

    </body>
</html>

我尝试使用和不使用CSS我得到相同的结果。这几乎是有效的，三角形在某种程度上它们应该是但不完全，黑色也在那里没有问题，但它表明它的工作很好，整个区域是可点击的但它只注册第二个链接（谷歌）无论你在哪里点击，它都不会转到第一个链接（例子）。

请提供任何帮助。

Answer 1

向SVG元素添加链接非常容易。

<svg viewBox="0 0 400 300">

  <a xlink:href="javascript:alert('red')">
    <polygon points="0,0, 400,0, 0,300" fill="red"/>
  </a>

  <a xlink:href="javascript:alert('blue')">
    <polygon points="400,0, 400,300, 0,300" fill="blue"/>
  </a>

</svg>

<强>更新

你看到的黑色是两个三角形多边形。如果未指定填充颜色，则默认为黑色。

您需要做的就是将填充颜色设置为透明。

<svg viewBox="0 0 400 300">

  <image xlink:href="image.jpg" x="0" y="0" height="100%" width="100%"/>

  <a xlink:href="http://www.example.com">
    <polygon points="0,0, 400,0, 0,300" fill="transparent"/>
  </a>

  <a xlink:href="http://www.google.com">
    <polygon points="400,0, 400,300, 0,300" fill="transparent"/>
  </a>

</svg>

如何使用SVG创建响应式和交互式图像映射

1 个答案: