On 01/10/2017 03:13 PM, Grundtvig Nielsen Niels wrote:
after a question from a colleague who’s really keen to move his
documentation set to DITA, I carried out a quick experiment with SVG: to
my satisfaction, I found out that you can include hyperlinks in .svg code.
In the attached file, you should see that the text ‘daily Webfocus
report …’ is a hyperlink to an .html file (at least in Mozilla and IE)
Regrettably, it seems that when the .svg file is used as a referenced
graphic in a DITA topic and output to Webhelp (as an .svg) the hyperlink
is no longer recognised. Is this a known limitation, or
browser-dependent, or something else? I would like to have the
hyperlinks working, but have not been reckless enough to tell the my
colleague that they will ;-}
For the hyperlink to work, the SVG element must be *embedded* in the
HTML page XXE generates. That is, something like:
<p><svg version="1.1" xmlns="http://www.w3.org/2000/svg"; ...>
... SVG CONTENT HERE ...
<a xlink:href="threshold_report.html">
... SVG CONTENT HERE ...
</svg></p>
The hyperlink does not seem to work with something like:
<p><img src="creditRiskControl_linktest.svg"/></p>
DITA 1.3 (hence a very recent XXE) supports this:
1) Use the "Add image" button found in the DITA Topic toolbar
(http://www.xmlmind.com/xmleditor/_distrib/doc/dita/help.html#topic_toolbar).
2) Select svg-container or fig(svg-container).
3) Click the image placeholder. This selects svg-ref
4) Use the Edit tool to replace svg-ref by svg:svg [*].
5) Double-click the newly insert SVG placeholder (a blank area). This
displays a file chooser dialog box allowing to *embed* an SVG file. See
attached example.
6) Convert the DITA document to HTML or to Web Help. The hyperlink found
in the SVG embedded in the generated HTML page works OK.
---
[*] Our svg-container element template contains by default svg-ref and
not svg:svg because we assumed that most user prefer to link an SVG file
rather than embed it.
Note that it's possible to define custom svg-container element templates
without leaving XXE. See tutorial "Inserting custom element templates",
http://www.xmlmind.com/xmleditor/_tutorial/element_template/index.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN"
"topic.dtd">
<topic id="Untitled">
<title>Test</title>
<body>
<p>Test.</p>
<fig>
<title>Test</title>
<svg-container>
<svg:svg height="204px" style="enable-background:new 0 0 645.9 204;"
version="1.1" viewBox="0 0 645.9 204" width="645.9px" x="0px"
y="0px" xml:space="preserve"
xmlns:svg="http://www.w3.org/2000/svg";>
<svg:style type="text/css">
.st0{fill:#F9C499;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
.st1{fill:#CCFF66;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
.st2{fill:#D7E3BF;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
.st3{font-family:'Arial';}
.st4{font-size:10px;}
.st5{fill:#D7E3BF;}
.st6{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st7{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
.st8{fill:none;}
.st9{font-family:'Arial'; font-style:italic;}
.st10{font-size:9px;}
.st11{font-family:'Arial'; font-weight:bold;}
</svg:style>
<svg:g id="labels">
<svg:path class="st0"
d="M126.8,17.6H8.9c-4.8,0-8.7-3.9-8.7-8.7v0c0-4.8,3.9-8.7,8.7-8.7h118c4.8,0,8.7,3.9,8.7,8.7v0 C135.5,13.7,131.6,17.6,126.8,17.6z"/>
<svg:path class="st1"
d="M388.4,17.6H155.8c-4.8,0-8.7-3.9-8.7-8.7v0c0-4.8,3.9-8.7,8.7-8.7h232.5c4.8,0,8.7,3.9,8.7,8.7v0 C397.1,13.7,393.2,17.6,388.4,17.6z"/>
<svg:path class="st2"
d="M637.1,17.6h-204c-4.8,0-8.7-3.9-8.7-8.7v0c0-4.8,3.9-8.7,8.7-8.7h204c4.8,0,8.7,3.9,8.7,8.7v0 C645.8,13.7,641.9,17.6,637.1,17.6z"/>
<svg:text class="st3 st4"
transform="matrix(1 0 0 1 7.3896 12.4277)">Merchant Turnkey webshop</svg:text>
<svg:text class="st3 st4"
transform="matrix(1 0 0 1 179.6266 12.4277)">WL â Credit Risk Manager</svg:text>
<svg:text class="st3 st4"
transform="matrix(1 0 0 1 532.5112 12.4277)">CS ??</svg:text>
</svg:g>
<svg:g id="connectors">
<svg:g>
<svg:polyline class="st5"
points="117.1,61.6 146.9,61.6 146.9,61.6 "/>
<svg:g>
<svg:line class="st6" x1="117.1" x2="138" y1="61.6" y2="61.6"/>
<svg:g>
<svg:polygon points="136.1,64.5 146.9,61.6 136.1,58.7 "/>
</svg:g>
</svg:g>
</svg:g>
<svg:g>
<svg:polyline class="st5"
points="254.9,61.6 284.7,61.6 284.7,61.6 "/>
<svg:g>
<svg:line class="st6" x1="254.9" x2="275.8" y1="61.6"
y2="61.6"/>
<svg:g>
<svg:polygon points="273.8,64.5 284.7,61.6 273.8,58.7 "/>
</svg:g>
</svg:g>
</svg:g>
<svg:g>
<svg:polyline class="st5"
points="117.1,184.3 442.6,184.3 442.6,184.3 "/>
<svg:g>
<svg:line class="st6" x1="126" x2="442.6" y1="184.3"
y2="184.3"/>
<svg:g>
<svg:polygon points="127.9,187.2 117.1,184.3 127.9,181.4 "/>
</svg:g>
</svg:g>
</svg:g>
<svg:g>
<svg:polyline class="st5"
points="393.4,61.6 423.2,61.6 423.2,61.6 "/>
<svg:g>
<svg:line class="st6" x1="393.4" x2="414.3" y1="61.6"
y2="61.6"/>
<svg:g>
<svg:polygon points="412.3,64.5 423.2,61.6 412.3,58.7 "/>
</svg:g>
</svg:g>
</svg:g>
<svg:g>
<svg:polyline class="st5"
points="503.6,122.7 533.4,122.7 533.4,122.7 "/>
<svg:g>
<svg:line class="st6" x1="503.6" x2="524.6" y1="122.7"
y2="122.7"/>
<svg:g>
<svg:polygon points="522.6,125.6 533.4,122.7 522.6,119.8 "/>
</svg:g>
</svg:g>
</svg:g>
</svg:g>
<svg:g id="cartouches">
<svg:path class="st7"
d="M110.6,79.6h-95c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h95c3.6,0,6.5,2.9,6.5,6.5v23 C117.1,76.7,114.2,79.6,110.6,79.6z"/>
<svg:path class="st7"
d="M110.6,202.3h-95c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h95c3.6,0,6.5,2.9,6.5,6.5v23 C117.1,199.4,114.2,202.3,110.6,202.3z"/>
<svg:path class="st7"
d="M248.4,79.6h-95c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h95c3.6,0,6.5,2.9,6.5,6.5v23 C254.9,76.7,252,79.6,248.4,79.6z"/>
<svg:path class="st7"
d="M386.9,79.6h-95c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h95c3.6,0,6.5,2.9,6.5,6.5v23 C393.4,76.7,390.5,79.6,386.9,79.6z"/>
<svg:path class="st7"
d="M525.4,79.6h-95c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h95c3.6,0,6.5,2.9,6.5,6.5v23 C531.9,76.7,529,79.6,525.4,79.6z"/>
<svg:path class="st7"
d="M555.5,202.3h-107c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h107c3.6,0,6.5,2.9,6.5,6.5v23 C562,199.4,559.1,202.3,555.5,202.3z"/>
<svg:path class="st7"
d="M635.7,140h-95c-3.6,0-6.5-2.9-6.5-6.5v-23c0-3.6,2.9-6.5,6.5-6.5h95c3.6,0,6.5,2.9,6.5,6.5v23 C642.2,137.1,639.3,140,635.7,140z"/>
<svg:polygon class="st7"
points="503.6,122.7 476.6,142.8 449.6,122.7 476.6,102.7 "/>
</svg:g>
<svg:g id="stgep_text">
<svg:rect class="st8" height="34.4" width="105.7" x="150.7"
y="45.5"/>
<svg:a xlink:href="threshold_report.html"
xmlns:xlink="http://www.w3.org/1999/xlink";><svg:text
transform="matrix(1 0 0 1 150.7248 54.0732)"><svg:tspan
class="st3 st4" x="0" y="0">daily Webfocus report </svg:tspan><svg:tspan
class="st3 st4" x="0" y="11">identifying merchants </svg:tspan><svg:tspan
class="st3 st4" x="0" y="22">over threshold</svg:tspan></svg:text></svg:a>
<svg:rect class="st8" height="34.4" width="105.7" x="289.4"
y="45.5"/>
<svg:text transform="matrix(1 0 0 1 289.3642 54.0732)"><svg:tspan
class="st3 st4" x="0" y="0">define additional info </svg:tspan><svg:tspan
class="st3 st4" x="0" y="11">required to increase </svg:tspan><svg:tspan
class="st3 st4" x="0" y="22">threshold</svg:tspan></svg:text>
<svg:rect class="st8" height="34.4" width="105.7" x="537.8"
y="108.4"/>
<svg:text transform="matrix(1 0 0 1 537.8474 116.9617)"><svg:tspan
class="st3 st4" x="0" y="0">increase threshold in </svg:tspan><svg:tspan
class="st3 st4" x="0" y="11">turnkey webshop</svg:tspan></svg:text>
<svg:rect class="st8" height="34.4" width="105.7" x="428" y="45.5"/>
<svg:text transform="matrix(1 0 0 1 428.0035 54.0732)"><svg:tspan
class="st3 st4" x="0" y="0">contact merchant to </svg:tspan><svg:tspan
class="st3 st4" x="0" y="11">obtain additional info</svg:tspan></svg:text>
<svg:rect class="st8" height="22.2" width="60" x="391.4" y="111.6"/>
<svg:text transform="matrix(1 0 0 1 391.3575 119.3255)"><svg:tspan
class="st9 st10" x="0" y="0">additional info </svg:tspan><svg:tspan
class="st9 st10" x="0" y="11">satisfactory?</svg:tspan></svg:text>
<svg:rect class="st8" height="34.4" width="114.5" x="446.4"
y="167.3"/>
<svg:text transform="matrix(1 0 0 1 446.3839 175.879)"><svg:tspan
class="st3 st4" x="0" y="0">CC payment methods will </svg:tspan><svg:tspan
class="st3 st4" x="0" y="11">be deactivated when </svg:tspan><svg:tspan
class="st3 st4" x="0" y="22">threshold is reached</svg:tspan></svg:text>
<svg:rect class="st8" height="23.8" width="91.2" x="13.7" y="47.5"/>
<svg:text transform="matrix(1 0 0 1 13.6786 56.0732)"><svg:tspan
class="st3 st4" x="0" y="0">CC turnover > xxxK/ </svg:tspan><svg:tspan
class="st3 st4" x="0" y="11">rolling 12 months</svg:tspan></svg:text>
<svg:rect class="st8" height="23.8" width="91.2" x="13.7"
y="167.3"/>
<svg:text class="st3 st4"
transform="matrix(1 0 0 1 13.6786 175.879)">inform merchant</svg:text>
<svg:g>
<svg:line class="st5" x1="476.6" x2="476.6" y1="102.7" y2="79.9"/>
<svg:g>
<svg:line class="st6" x1="476.6" x2="476.6" y1="96" y2="79.9"/>
<svg:g>
<svg:polygon points="478.8,94.5 476.6,102.7 474.5,94.5 "/>
</svg:g>
</svg:g>
</svg:g>
<svg:g>
<svg:line class="st5" x1="476.6" x2="476.6" y1="165.5"
y2="142.8"/>
<svg:g>
<svg:line class="st6" x1="476.6" x2="476.6" y1="158.9"
y2="142.8"/>
<svg:g>
<svg:polygon points="478.8,157.4 476.6,165.5 474.5,157.4 "/>
</svg:g>
</svg:g>
</svg:g>
<svg:text class="st11 st10"
transform="matrix(1 0 0 1 507.667 119.0019)">Y</svg:text>
<svg:text class="st11 st10"
transform="matrix(1 0 0 1 481.667 151.5898)">N</svg:text>
</svg:g>
</svg:svg>
</svg-container>
</fig>
</body>
</topic>
--
XMLmind XML Editor Support List
xmleditor-support@xmlmind.com
http://www.xmlmind.com/mailman/listinfo/xmleditor-support
