Как я могу вставить svg, содержащий ссылки, на страницу xwiki?

Контекст:

У меня есть графика svg, содержащая ссылки на внешние страницы. Если я открою его непосредственно в Firefox или IE, ссылки правильно перейдут на другие URL-адреса.

Я хочу вставить графику на страницу xWiki. Тривиальный способ: Image/Attached image... в редакторе wisiwig генерирует [[image:foo.svg||height="..." width="..."]] в исходном коде xwiki 2.1, но... ссылки больше не кликабельны.

Вопрос :

Как я могу вставить документ svg так, чтобы ссылки в 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>

Как видите, зеленый прямоугольник внизу содержит ссылку на Google. Но когда я вставляю его на страницу xwiki, ссылка не активна. Я просмотрел сгенерированный HTML и увидел, что svg включен с тегом <img>, и я предполагаю, что это причина, по которой ссылки не активны. Но я не мог найти, как заставить его работать

Рекомендации :

Я использую версию xwiki 6.4.4 и синтаксис xwiki версии 2.1, но я приму решение для версии 7 или другой синтаксис для страниц xwiki.


svg xwiki
person Serge Ballesta    schedule 19.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема не в 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>

Если вы можете скопировать содержимое 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__.
person Sergiu Dumitriu    schedule 20.07.2015
comment
Спасибо за подробный ответ. Но прямое включение блока <svg> в HTML-страницу не работает в IE. К счастью, использовать тег <object> легко: {{velocity}}{{html}}<object data="$doc.getAttachmentURL('foo.svg')" type="image/svg+xml" width="120" height="320"/>{{/html}}{{/velocity}}. Этот работал на Firefox, Chrome и IE - person Serge Ballesta; 21.07.2015