Question

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

```
<?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标签链接格式化。

当我在浏览器中单独查看图像时，链接可以正常工作。但是，当我在Jekyll站点内查看图像时，链接不再起作用。有什么想法吗？

Answer 1

如果您将svg嵌入为图像（img），则无法控制它（外部css和js），并且链接不可点击。选项包括：

inline svg

{% include_relative workflow.svg %}

使用对象标签

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

有关https://css-tricks.com/using-svg/

使用Jekyll，SVG图形内部的链接无法正常工作

1 个答案: