使用Jekyll，SVG图形内的链接不起作用 [英] With Jekyll, links inside SVG graphics aren't working

问题描述

我在Jekyll项目中有一个SVG图形，其代码如下:

I have an SVG graphic in a Jekyll project with code like this:

```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 451.5 100" enable-background="new 0 0 451.5 100" xml:space="preserve">



     <a xlink:href="http://google.com">
<g id="step1_1_">
    <rect x="19" y="15.7" fill="whitesmoke" stroke="orange" stroke-miterlimit="10" width="110.6" height="69.1"/>
    <text id="step1" transform="matrix(1 0 0 1 36.1851 39.8042)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Configure the </tspan><tspan x="0" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">widget</tspan></text>
</g>

</a>

 <a xlink:href="http://nytimes.com">
<g id="step2_1_">
    <rect x="170.2" y="15.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="110.6" height="69.1"/>
    <text id="step2" transform="matrix(1 0 0 1 190.2962 39.8042)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Configure the </tspan><tspan x="0" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">gizmo</tspan></text>
</g>
</a>

 <a xlink:href="http://yahoo.com">
<g id="step3_1_">
    <rect x="321.2" y="15.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="110.6" height="69.1"/>
    <text id="step3" transform="matrix(1 0 0 1 342.4126 38.7301)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Copy the scripts</tspan></text>
</g>
</a>
<g id="arrows">
    <g>
        <g>
            <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="134" y1="46.5" x2="156" y2="46.5"/>
            <g>
                <path d="M162,46.5c-2.8,1.1-6.4,2.9-8.5,4.8l1.7-4.8l-1.7-4.8C155.6,43.6,159.2,45.4,162,46.5z"/>
            </g>
        </g>
    </g>
    <g>
        <g>
            <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="287" y1="48.5" x2="309" y2="48.5"/>
            <g>
                <path d="M315,48.5c-2.8,1.1-6.4,2.9-8.5,4.8l1.7-4.8l-1.7-4.8C308.6,45.6,312.2,47.4,315,48.5z"/>
            </g>
        </g>
    </g>
</g>
</svg>
```

此图像只是三个矩形形状，使用a标签使用链接对其进行了格式设置.

This image is just three rectangular shapes that are formatted with links using the a tag.

当我单独在浏览器中查看图像时，链接起作用.但是，当我在Jekyll网站内查看图像时，链接不再起作用.有什么想法吗?

When I view the image in the browser by itself, the links work. However, when I view the image inside a Jekyll site, the links no longer work. Any ideas why?

推荐答案

如果将svg嵌入为图像(img)，则无法对其进行控制(外部css和js)，并且链接不可单击.选项是:

If you embed your svg as an image (img) you have no control over it (external css and js) and links are not clickable. Options are :

1. 内嵌svg

{% include_relative workflow.svg %}

1. 使用对象标签

<object data="/workflow.svg" type="image/svg+xml" class="mailicon" /> </object>

<object data="/workflow.svg" type="image/svg+xml" class="mailicon" /> </object>

有关 https://css-tricks.com/using-svg/的更多信息

这篇关于使用Jekyll，SVG图形内的链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！