I have an SVG object link on my page:
<a href="#" target="_blank">
<object data="icons/email.svg" type="image/svg+xml" style="pointer-events: none;" class="icon">
gmail
</object>
</a>
I'm trying to change the fill color on hover using this code in my SVG file:
<style>
* {
pointer-events: fill;
}
#email:hover path {
fill:white;
}
</style>
The problem is that the hover effect only works when I remove the style="pointer-events: none;" from the HTML, but the link only works when that code is there.
Any help is appreciated. I checked similar topics and wasn't able to find an answer to this.
Links only work when the contents of an <object> tag is non-interactive hence they work if pointer-events="none" and not otherwise.
For your use case you probably need to make the link internal to the SVG file i.e. via an SVG <a> tag in the SVG file rather than using an HTML link in the HTML file.
Related
I'm using Docusing php api to create and send documents to sign, but when I try to insert an image (I'm using HTML document) the document show's the signer only a white square with the text:
The linked image cannot be displayed. the file may have been moved, renamed, or deleted. Verify that the link points to the correct file and location.
Of course I check the image link several times, I changed the image to another server, try different formats, etc...
Any suggestions??
My HTML goes like:
return <<<HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
</head>
<body>
<img style="display: block; margin-left: auto; margin-right: auto;" src="/documents/logo.png" alt="" width="250" height="100" />
<p style="font-family: Garamond; text-align: center; font-size: 14pt; line-height: 0.1;"><strong>Document title</strong></p>
and then the rest of the document.
The only way to add an image to an htlm source doc used for DocuSign is to include it, inline, within the html. In the same way, any CSS must also be inline.
Use a dataurl with an img tag. It works fine.
If you want an embedded image I would suggest that it's inline in the HTML, or you can use PDF or Word or some other format that doesn't require the other file to be loaded.
the DocuSign system cannot load that file and in any case would "flatten" your HTML into a PDF anyway (unless you use responsive signing).
I try to use d3-node to make a chart in server side and try to render the new chart to ejs with following code:
<%= svgChart %>
when I use browser to view it, it only shows the svg tag contents like below:
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="400"><defs> <style type="text/css"><![CDATA[ .axis{font: 10px sans-serif;} .axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;} .x.axis path{display: none;} ]]></style></defs><g transform="translate(40,20)"><path d="M20,32.4L20.430000000000003,32.4L20.86,32.4L21.290000000000003,32.4L21.720000000000002,32.4L22.150000000000002,32.4L22.580000000000002,32.4L23.01,32.4L23.44,32.4L23.87,32.4L24.299999999999997,32.4L24.73,32.4L25.16,32.4L25.590000000000003,32.4L26.02,32.4L26.450000000000003,32.4L26.88,32.4L27.310000000000002,32.4L27.740000000000002,32.4L28.17,32.4L28.6,32.4L29.03,32.4L29.46,32.4L29.89,32.4L30.32,32.4L30.75,32.4L31.18,32.4L31.61,32.4L32.04,32.4L32.47,32.4L32.9,32.4L33.33,32.4L33.76,32.4L34.190000000000005,32.4L34.620000000000005,32.4L35.050000000000004,32.4L35.480000000000004,32.4L35.910000000000004,32.4L36.34,32.4L36.77,32.4L37.2,32.4L37.63,32.4L38.06,32.4L38.489999999999995,32.4L38.92,32.4L39.35,32.4L39.78,32.4L40.21,32.4L40.64,32.4L41...............................
not showing the chart itself.
The svgChart contains the string of the svg tag. If I copy the svgChart content (the string) directly to the ejs, it will show the chart perfectly.
it seems ejs not able to render the tag contents when loading the page.It think the svgChart as a plain string.
My question: How to make the ejs recognize the svgChart as svg tag so it can show the svg chart insead of the text of the tag?
You can also include external SVG files directly in an EJS file like below.
<%- include ("path/to/file.svg") %>
Incidentally, this method also allows any text in the SVG to be rendered as real text in the page.
<svg height="30" width="200">
<text x="0" y="15" fill="red">Hello from SVG</text>
</svg>
Try to use <%- svgChart %> instead <%= svgChart %>.
By EJS documentation:
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the
unescaped value into the template
I want to inline SVG code in HTML and have simple text (like "alt") as fallback for not supporting browsers. It's desired that the text could be formatted with CSS.
You can e.g use modernizr to toggle display of some text based on whether svg is supported or not:
<style>
/* if svg is supported - hide the fallback */
.svg .fallback {
display: none;
}
</style>
<svg> ... </svg>
<div class="fallback"></div>
See jsfiddle.
You can use foreignObject element to display fallback text.
If the browser supports SVG, foreignObject element contains fallback contents will be hidden by display attribute.
If the browser does not support SVG, elements defined by SVG have no effect, so fallback div element will be shown.
<html>
<head>
<style>
div.fallback{color:red;}
</style>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="50" fill="red"/>
<foreignObject display="none">
<div class="fallback">This browser does not support inline SVG.</div>
<foreignObject>
</svg>
</body>
</html>
Depending on parent html tag of an SVG object, I would like it's path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here's an example:
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
<object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>
Granted, this can't be done, but is there an alternative without using JavaScript?
Starting again, this is the best question/answer to your problem that I can find:
How to apply a style to an embedded SVG?
It's possible for you to add a linked stylesheet to the file you wish to embed by hand...
Thereby avoiding the use of JavaScript.
I would argue that you should try not to ask redundant questions.
We'd have both done well to have sourced this earlier.
Yes you can.
SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.
Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.
That said, if you're not planning to use JavaScript, then do it with CSS instead.
Updated with a working example, found here;
http://jsfiddle.net/Zp6HS/4/
Replacing the 'circle' element with your custom path, and the css properties you want to change.
Can't you use the 'parent of' operator in css? Like so:
<style>
header > svg {
fill:blue;
}
body > svg {
fill:black;
}
</style>
In my Sharepoint masterpage I have added an <img> to the top of the <body> of the page so that I can use some CSS to set the <img> to fill the screen.
However I want a different image to be displayed depending on the theme in use. I currently use the following inside the masterpage:
<img alt="" id="fullscreen" src="/_layouts/images/Background.png" />
Is it possible to capture the name of the theme in use and append that to the file name so I can simple adjust file names to match there theme?
Or failing that can I add something to src=" " that will make the URL theme specific?
I think the idea is to reference the images from your theme CSS. So if an image changes between themes, the url to that image is stored in each of the theme CSS files.
You master page can then simply contain an element with always the same CSS class.
What about defaulting the images to hidden, and in the CSS for the theme you want it shown in, show it?
For example:
In your master page:
<img src="theme1.jpg" alt="" id="theme1fullscreen" style="display: hidden;" />
<img src="theme2.jpg" alt="" id="theme2fullscreen" style="display: hidden;" />
<img src="theme3.jpg" alt="" id="theme3fullscreen" style="display: hidden;" />
In the css for Theme X:
#themeXfullscreen {
display: block;
height: 100%;
width: 100%;
}
This way, you have the images and locations in the master page, and can hide and show the appropriate one based on the theme.