Create an hyperlink from SVG to a block in XSL-FO / PDF - svg

Hope somebody can help me, I'm stuck.
I am creating a set of SVG's and HTML files from an XML doc (via XSLT2), and I have hyperlinks in my SVG graphics (with xlink:href) to the HTML files. Basically, showing a database structure with rectangles for tables, and a click on a table goes to the explanation in HTML. So far so good.
Now, my customer tells me "I need all that in a single interactive PDF doc". So using another XSLT I produce a single XSL-FO doc with fo:block's for each table details and instream SVG's for the diagrams. The FO doc will be further processed through FOP to produce the PDF.
But now, I can't find a way to refer to a fo:block in the same doc from the rectangle in the embedded SVG? xlink:href expects a reference to an <a name="">, so how to indicate that I want to point to a fo:block id? Or is there an equivalent to the <a name=""> construct in FO?
Any help/hint greatly appreciated! Thanks to the community.

Add an id attribute to the fo:block and it should work:
<fo:block id="foo"></fo:block>
<image xlink:href="#foo" />

Related

Is there a way to generate PDF from specific HTML elements with CSS using Puppeteer?

I am trying to generate a PDF (as an A4 page) from a specific div in my HTML page along with it's style. Is there a way to do that without using addStyleTag? There is a lot of style and addStyleTag simply won't work.
Thank you.

I wanted to know what can I use to place objects anywhere in a website, like positioning a table in any part of the website? Thank you

I'm new to HTML and I would like to know how to place any object in any part of the website, for example, a table between the center and the left side. Thank you
HTML is about the structure of your website and webpage. Once you have the structure with all the elements written in HTML, you can customise their display and position through CSS (it's another language). Check this page to get a first understanding of how it looks like https://www.w3schools.com/css/.

Embedding clickable flowchart in kentico 10 website

Currently our content editors creates a flowchart in visio - and now we're trying to figure out the best way of allowing them to embed that in a kentico website.
We get them currently to export and add as a media library image which doesn't allow the content editor to hyperlink items in the flowchart to pages which could have more information.
Some other options we have considered:
exporting visio flowchart to pdf and displaying that pdf in the browser instead of the image.
third party tool that would host the flowchart content which we then embed into the kentico website using an iframe.
visio exporting the flowchart as html - but that includes a folder and various files which seems painful to integrate with our kentico website.
Just wondering if anyone else has any recommended approaches that we might not be considering?
Essentially there are many ways to solve this issue. You can go with a classic way (image with set of areas defined)
Use some online tools like http://www.image-maps.com/ to create an image map. You can use static text web part and paste your html there:
<img alt="someImage" src="~/Images/someimage.jpg" usemap="#ImageMap" />
<map name="ImageMap" id="ImageMap">
<area shape="rect" coords="727,25,907,89" href="http://www.google.com" target="_blank" alt="Your Alt Text Here..." />
<area shape="rect" coords="309,25,646,98" href="home.aspx" alt="Your Alt Text Here..." />
</map>
You can even clone for example editable image web part, adjust its properties to your needs (i.e. to area map property), but you still have to use outside tools to create an image map.

How to make svg not selectable in xsl?

I am trying to create watermark in pdf using xslt.
I have created watermark, but the problem is that text on page is not selectable only watermark is.
How to make text selectable, and watermark to be shown in background.
How to achive it using svg. I cannot use image, because it shold be a lot of different text, so it would be hard to create so many images. Is there any way to do it.
Is there any attribute or element to make it not selectable?
<fo:instream-foreign-object z-index="-1">
<svg:svg>
<svg:g font-size="50px" >
<svg:text fill="#FF0000"
>
watermark
</svg:text>
</svg:g>
</svg:svg>
</fo:instream-foreign-object>

How can I embed schema.org markup in SVG?

I wish to add semantics to SVG files and would like to use schema.org terms. Does SVG have a syntax for doing this? My first attempt would be:
<svg:text xmlns:svg="xmlns="http://www.w3.org/2000/svg" x="100" y="200"
html:itemtype="http://schema.org/Person" xmlns:html="http://www.w3.org/1999/xhtml"
>Joe Soap</svg:text>
Will this be valid SVG and display in conformant tools? and will the schema.org markup be recognized by search engines?
I never tried it, but I guess it should be possible to use RDFa, as SVG Tiny 1.2 allows the attributes
about
content
datatype
property
rel
resource
rev
typeof
(You could use the metadata element with RDF/XML.)

Resources