Как мога да вмъкна 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> и предполагам, че това е причината връзките да не са активни. Но не можах да намеря как да го накарам да работи

Препратки :

Използвам 6.4.4 версия на xwiki и 2.1 xwiki синтаксис, но ще приема решение за версия 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 файла в wiki документа, тогава можете просто да използвате {{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