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>
Related
When importing external SVG images the Inkscape offers three options:
Include SVG image as editable object(s) in the current file
Embed the SVG file in a image tag (not editable in this document)
Link the SVG file in a image tag (not editable in this document)
At first, for convenience I imported an SVG images (Image A) into master SVG image B in the third way (Link the SVG file) so that when editing image A, master image B changes accordingly. However, later in the publishing process, I found that I needed to make sure every part in master image B had to be editable, including those parts within image A.
Had I imported image A in the first way above (include SVG image), this would be possible. I had made some transformations to the linked image A within master image B so I didn't want to do it again. Is there a way to transform a linked image (<image xlink:href="XXX.svg" />) to an included image (<svg>...</svg>) with just a few clicks while preserving all the transformations I did to this image?
Right-click on the image and select 'Embed image'. This is going to embed it as an image, <svg:image ...>, though, not as an svg (I think that would be invalid SVG code, too).
For multiple images, use the extension 'Extensions > Images > Embed Images' without any image selected (or with all of them).
I have the following animation:
https://svgur.com/i/6XH.svg
If you click on the link, you will see that it starts playing once you hover it.
However, when I load the svg on a page using the image tag, as done below, the hover event doesn't seem to reach the svg image.
Is it possible to do this somehow? It is not an option to paste the svg directly in the html page, because the software I use don't allow for that.
Images by design do not expose a DOM and their content cannot receive mouse events; the target of the hover event is the <img> element itself. You can use an <object> or an <iframe> tag instead. The SVG is then inserted as a subdocument that users can interact with.
<object data="https://svgur.com/i/6XH.svg" width="322px" height="65px"></object>
I made a vector graphic in Inkscape, including layers and sub-layers for further use in Processing. I named all the layers in the UI, and realized that the final SVG only creates an inkscape:label attribute with that name, but id remains generic:
<svg:g id="layer1" inkscape:label="My custom label">
I know I can manually edit the labels in the XML editor, but is there a setting somewhere to automatically use the layer name as id?
I recently came across this question, as I was looking for the same topic. As it turned out, Inkscape (v0.92) has functions for that purpose now.
You can set IDs, and Labels in the Inkscape GUI in Object Properties menu, and they will be applied to the XML code then.
Example
Inkscape GUI
Draw a yellow rectangle and select it
Click on Object -> Object Properties...
In the menu set ID to yellow_rect and Label to #yellow_rect
Apply changes by a click on Set
To complete this example, repeat the steps above to create red_rect, set Label and ID
Eventually, group both rectanbles and set identifiers for the group as well.
XML Code
When I open the SVG file, Inkscape put my identifiers to the appropriate XML tags.
<g
id="rect_group">
<rect
rx="0.11797347"
y="250.69791"
x="5.0270834"
height="18.785416"
width="30.427082"
id="yellow_rect1"
style="fill:#f4ff00;fill-opacity:1;stroke:#000000;stroke-width:0.52916667;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.11797347"
y="258.89999"
x="24.606249"
height="16.933332"
width="33.602081"
id="red_rect1"
style="fill:#f40000;fill-opacity:1;stroke:#000000;stroke-width:0.52916664;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
</g>
I have the same requirement when I am creating a svg for Fritzing, because fritzing doesn't refer to the inkscape:label. In such circumstance, I can make sure that label holds the legit value for id. So I make a script to do saving myself out of the dirty and heavy job.
Please note that the script ONLY READ 'Plain SVG' format.
https://gist.github.com/TerrenceSun/972ef4eea97f331af1e6abfcafb7c6e5
I don't know about a setting to automatically use the layer name as id. But why not do it the other way round: if you remove the inkscape:label attribute, then the layer name automatically becomes the id of the svg:g in the inkscape UI.
The attribute inkscape:groupmode=layer is enough to make the svg:g a layer element.
I have a SVG logo rendered to the canvas using fabric.js, the original SVG is all black in color but I need the user to be able to change the color of each different parts of the logo, resulting in a object with multiple colors, e.g.:
wikimediauruguay.org/images/5/53/Wikimedia-logo.png
How can I achieve this? If I just use object.setFill() it changes the color of the entire object but I need to change the color of every part separately to whatever colors the user choose. Thanks.
EDIT: found the solution, just posted my answer below in case somebody else has the same question.
Perhaps someone who knows something about fabric.js would answer in a way that makes more sense for your case, but with plain old svg, an object is often a <g< element with things ( like <rect>, <path>, <ellipse>) inside. Each child of the group, can have its own event handler:
<g>
<path onclick='handle(evt)' attrs=stuff />
<rect onclick='handle(evt)' attrs=stuff />
<circle onclick='handle(evt)' attrs=stuff />
</g>
The function activated by the click can then interrogate evt.target to see which of the subelements received the click, sorta like this:
if (evt.target.nodeName=="path") {evt.target.setAttribute("fill","purple")}
Solved mi problem in a very simple way: I just needed to edit the SVG on Illustrator so that every different colored part of the logo will be on a different layer, then when I loaded the SVG via fabric.loadSVGFromURL() each layer will be treated as a different object by fabric.js, then I just could edit each object (layer) separately (setFill(), etc).
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" />