如何在 xwiki 页面中插入包含链接的 svg?
How can I insert a svg containing links in a xwiki page?
上下文:
我有一个包含 links 到外部页面的 svg 图形。如果我直接在 Firefox 或 IE 中打开它 links 正确转到其他 URL。
我想在 xWiki 页面中插入图形。简单的方法:wisiwig 编辑器中的 Image/Attached image...
在 xwiki 2.1 源代码中生成 [[image:foo.svg||height="..." width="..."]]
但是...... link 不再可点击。
问题:
如何以 linksvg 中的文件仍然有效的方式插入 svg 文件?
最小示例:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" height="130" width="120"
style="stroke:#000000; fill: #ffffff"/>
<rect x="10" y="10" height="50" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
<a xlink:href="http://www.google.fr">
<rect x="10" y="70" height="50" width="100"
style="stroke:#ff0000; fill: #00ff00"/>
</a>
</svg>
如您所见,底部的绿色矩形包含 link 到 google。但是当我将它插入 xwiki 页面时,link 未激活。我查看了生成的 HTML,发现 svg 包含在 <img>
标签中,我认为这是 link 未激活的原因。但是我找不到如何让它工作
参考资料:
我正在使用 6.4.4 版本的 xwiki 和 2.1 xwiki 语法,但我会接受版本 7 的解决方案或 xwiki 页面的其他语法
问题不在于 XWiki,而在于浏览器处理 SVG 作为 <img>
标签目标的方式。您可以尝试使用简单的 HTML:
<html>
<body>
<image src="foo.svg"/>
</body>
</html>
那也不能点击。
您可以改为嵌入 SVG:
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" height="130" width="120"
style="stroke:#000000; fill: #ffffff"/>
<rect x="10" y="10" height="50" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
<a xlink:href="http://www.google.fr">
<rect x="10" y="70" height="50" width="100"
style="stroke:#ff0000; fill: #00ff00"/>
</a>
</svg>
</body>
</html>
如果您可以在 wiki 文档中复制 SVG 文件的内容,那么您只需使用 {{html clean="false"}}
包装器即可:
Some **wiki content**
{{html clean="false"}}
<svg ....>
</svg>
{{/html}}
Some __other wiki content__.
如果没有,那么您应该这样做:
Some **wiki content**
{{velocity}}
{{html clean="false"}}
$doc.getAttachment('foo.svg').getContentAsString('UTF-8')
{{/html}}
{{/velocity}}
Some __other wiki content__.
上下文:
我有一个包含 links 到外部页面的 svg 图形。如果我直接在 Firefox 或 IE 中打开它 links 正确转到其他 URL。
我想在 xWiki 页面中插入图形。简单的方法:wisiwig 编辑器中的 Image/Attached image...
在 xwiki 2.1 源代码中生成 [[image:foo.svg||height="..." width="..."]]
但是...... link 不再可点击。
问题:
如何以 linksvg 中的文件仍然有效的方式插入 svg 文件?
最小示例:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" height="130" width="120"
style="stroke:#000000; fill: #ffffff"/>
<rect x="10" y="10" height="50" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
<a xlink:href="http://www.google.fr">
<rect x="10" y="70" height="50" width="100"
style="stroke:#ff0000; fill: #00ff00"/>
</a>
</svg>
如您所见,底部的绿色矩形包含 link 到 google。但是当我将它插入 xwiki 页面时,link 未激活。我查看了生成的 HTML,发现 svg 包含在 <img>
标签中,我认为这是 link 未激活的原因。但是我找不到如何让它工作
参考资料:
我正在使用 6.4.4 版本的 xwiki 和 2.1 xwiki 语法,但我会接受版本 7 的解决方案或 xwiki 页面的其他语法
问题不在于 XWiki,而在于浏览器处理 SVG 作为 <img>
标签目标的方式。您可以尝试使用简单的 HTML:
<html>
<body>
<image src="foo.svg"/>
</body>
</html>
那也不能点击。
您可以改为嵌入 SVG:
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" height="130" width="120"
style="stroke:#000000; fill: #ffffff"/>
<rect x="10" y="10" height="50" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
<a xlink:href="http://www.google.fr">
<rect x="10" y="70" height="50" width="100"
style="stroke:#ff0000; fill: #00ff00"/>
</a>
</svg>
</body>
</html>
如果您可以在 wiki 文档中复制 SVG 文件的内容,那么您只需使用 {{html clean="false"}}
包装器即可:
Some **wiki content**
{{html clean="false"}}
<svg ....>
</svg>
{{/html}}
Some __other wiki content__.
如果没有,那么您应该这样做:
Some **wiki content**
{{velocity}}
{{html clean="false"}}
$doc.getAttachment('foo.svg').getContentAsString('UTF-8')
{{/html}}
{{/velocity}}
Some __other wiki content__.