I can't animate a svg that I import using the img tag. I can't hard code the svg, as my project generates it during pre-processing using webpack. Sadly, it doesn't seems like I could fetch my file through the svg tag, as I'm not aware of any "src" or "href" attribute.
How can I animate a SVG who is not hard coded ?
That really depends on how is powered your animation.
There are basically three ways to generate an animated SVG:
SMIL Animation - unfortunately not really widely supported (but you did tag with [svg-animate], so let's take it as the first case).
CSS Animation - With the emergence of SVG2, I bet these will become more and more common.
Script based Animations.
How do these behave when their <svg> documentElement is embedded in an <img> tag?
SMIL animations in <img>.
In supporting browsers, these would run just normally, as if your SVG was not embedded.
The only restrictions you would face are
You wouldn't receive any user-gesture, so the element.click and alike events won't work
You can't fallback to a script based animation for browsers that don't support SMIL animations (IE...).
Both limitations do not affect SVG loaded in <object>, <embed> or <iframe>, so you could well use it instead if you need it.
var svgStr = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50">
<rect id="rect" x="-30" y="0" width="30" height="50">
<!-- this will work normally, even in an <img> -->
<animate attributeType="XML" attributeName="x" from="-30" to="50"
begin="0s" dur="10s" repeatCount="indefinite"/>
<!-- this will not work in <img>, but will in <object>/<iframe>/<embed> -->
<animate attributeType="XML" attributeName="fill" from="blue" to="red"
begin="rect.click"
dur="1s" repeatCount="1"/>
</rect>
<!-- js-based workaround won't work in <img> but will in <object>/<iframe>/<embed> -->
<script src="https://cdn.rawgit.com/FakeSmile/FakeSmile/23c5ceae/smil.user.js"><\/script>
</svg>`;
loadSVG(document.images[0]);
loadSVG(document.querySelector('object'));
function loadSVG(container) {
var url = URL.createObjectURL(new Blob([svgStr], {type: 'image/svg+xml'}));
container.src = container.data = url;
}
img{
border: 1px solid green;
}
object{
border: 1px solid blue;
}
<img src="">
<object></object>
<div>Try to click the black rectangle in both the <code><img></code> and <code><object></code> tags.
CSS Animations in <img>.
Just like SMIL animations, they should work in supporting browsers, with the same user-gesture limitations, and the same possible ways around (use an other container):
var svgStr = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50">
<rect id="rect" x="0" y="0" width="30" height="50"/>
<defs>
<style>
#rect {
/* this will work normally, even in an img */
animation: move 10s linear infinite;
}
#rect:hover {
/* this will not work in img, but will in object/iframe/embed */
animation: move 10s linear infinite, color 1s 1;
}
#keyframes move {
from {
transform: translate(-30px, 0px);
}
to {
transform: translate(50px, 0px);
}
}
#keyframes color {
from {
fill: blue;
}
to {
fill: red;
}
}
</style>
</defs>
</svg>`;
loadSVG(document.images[0]);
loadSVG(document.querySelector('object'));
function loadSVG(container) {
var url = URL.createObjectURL(new Blob([svgStr], {type: 'image/svg+xml'}));
container.src = container.data = url;
}
img{
border: 1px solid green;
}
object{
border: 1px solid blue;
}
<img src="">
<object></object>
<div>Try to mouse hover the black rectangle in both the <code><img></code> and <code><object></code> tags.
Script based Animations in <img>.
These will simply not work. SVG documents embedded in <img> tag can not be scripted.
To workaround this, use either an <object>, an <embed> or an <iframe> element as container.
var svgStr = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50">
<rect id="rect" x="0" y="0" width="30" height="50"/>
<script type="application/javascript">
// will simply never work in img
var x = 0, rect = document.getElementById('rect');
function anim() {
x = (x + 1) % 80;
rect.setAttribute('x', x - 30);
requestAnimationFrame(anim);
}
anim();
<\/script>
</svg>`;
loadSVG(document.images[0]);
loadSVG(document.querySelector('object'));
function loadSVG(container) {
var url = URL.createObjectURL(new Blob([svgStr], {type: 'image/svg+xml'}));
container.src = container.data = url;
}
img{
border: 1px solid green;
}
object{
border: 1px solid blue;
}
<img src="">
<object></object>
So basically, SVG in <img> comes with a lot of restrictions, that can all be overwhelmed by using an other container.
Now, every container will come with its own restrictions:
<iframe> will not resize to its content, it will also come by default with a border and some other ugly things.
<object> and <embed> will get unloaded by webkit browsers when not visible (display: none), and won't be cached in any browser...
And of course, there is also the possibility to fetch your SVG markup through AJAX and to load it inside your actual HTML page, but I personally can't advice to do so:
You would need to be sure you don't have duplicate id elements,
You would need to be sure all your CSS rules are specific enough that they won't affect other elements in your page,
You would have to be sure you are loading only trusted code, since scripts will run, that is to say you keep a wide open door to XSS attacks.
And since we're here, an other limitation of SVG in <img> is that it can not load any resources outside its own markup, everything needs to be included in it directly, even fonts and raster images.
Related
Given this HTML and CSS that embeds an SVG as a background:
<div class="box"></div>
.box {
width: 300px;
height: 200px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect id="rect" width="100" height="100" fill="red"><animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/></rect></svg>');
}
I want to use JavaScript to access #rect like so:
// Wait for the SVG to load.
window.onload = function() {
// ...but this still logs null
console.log(document.getElementById("rect"));
}
But this prints null in the console. Is there any way to get a reference to this <rect> via JavaScript?
When loaded as a CSS <image> (like through background-image but also through content and other CSS properties), your SVG document is loaded in an external environment, that scripts don't have access to, just like it is in an HTML <img> by the way.
For all that matters you can even forget there is an SVG Document loaded at all here.
If you want to modify the image, you need to edit the URL directly:
const box = document.querySelector(".box");
// rule is a string
const rule = getComputedStyle(box).backgroundImage;
box.style.backgroundImage = rule.replace("red", "blue");
.box {
width: 300px;
height: 200px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect id="rect" width="100" height="100" fill="red"><animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/></rect></svg>');
}
<div class="box"></div>
The Firefox bug in question is https://bugzilla.mozilla.org/show_bug.cgi?id=1610093
It's a long-standing issue whereby the getScreenCTM method of an SVG element returns incorrect values when a parent above the root SVG element has a transform applied.
The following snippet should show the black circle directly under the mouse pointer inside the red box. This works correctly in webkit/blink where the css transform on the parent is properly calculated. In Firefox this bug causes the black circle to be offset by the same values as the css transform on the parent div element.
I've avoided the issue up until now by ensuring there are no transforms further up the dom tree, but I'm now developing this as a component where I won't have control over the parent dom.
Does anyone know an easy workaround for getting a correct transform matrix?
const svgEl = document.querySelector(`svg#test-1`);
const circleEl = document.querySelector(`svg#test-1 circle`);
const handleMouseMove = (e) => {
// transform screen to SVG coordinate space
const mousePoint = svgEl.createSVGPoint();
mousePoint.x = e.clientX;
mousePoint.y = e.clientY;
const mouseCoordsInCanvasSpace = mousePoint.matrixTransform(svgEl.getScreenCTM().inverse())
// set circle to coords, should be mouse center in SVG coord space
circleEl.setAttributeNS(null, 'cx', mouseCoordsInCanvasSpace.x);
circleEl.setAttributeNS(null, 'cy', mouseCoordsInCanvasSpace.y);
}
window.addEventListener('mousemove', handleMouseMove);
body{
padding: 0px;
margin: 0px;
}
svg {
border: 2px solid red;
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<body>
<div style="transform: translate(50px, 50px);">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" id="test-1">
<circle r="10" />
</svg>
</div>
</body>
</html>
That is an annoying bug! My suggestion is to use an <object> element. The source/data for the object should be the SVG.
In the following example I'm using a data URL as a data source for the <object>, so that we at least can see something here on ST. But I imagine that the SVG should be dynamic somehow. So, to make this work you will need to load the SVG as a source of a file (data="/file.svg"). If you do that you have access to the contentDocument property on <object> and in that way you have direct access to the DOM of the SVG from the "outside". It needs to run from a web server and on the same domain as well.
body{
padding: 0px;
margin: 0px;
}
object {
border: 2px solid red;
margin-left: 0px;
}
<div style="transform: translate(50px, 50px);">
<object width="100" height="100" type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgaWQ9InRlc3QtMSI+CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KPCFbQ0RBVEFbCnZhciBjaXJjbGVFbDsKY29uc3QgaGFuZGxlTW91c2VNb3ZlID0gZSA9PiB7CiAgY29uc3QgbW91c2VQb2ludCA9IG5ldyBET01Qb2ludChlLmNsaWVudFgsIGUuY2xpZW50WSk7ICAKICBjb25zdCBtb3VzZUNvb3Jkc0luQ2FudmFzU3BhY2UgPSBtb3VzZVBvaW50Lm1hdHJpeFRyYW5zZm9ybShlLnRhcmdldC5nZXRTY3JlZW5DVE0oKS5pbnZlcnNlKCkpOwogIC8vIHNldCBjaXJjbGUgdG8gY29vcmRzLCBzaG91bGQgYmUgbW91c2UgY2VudGVyIGluIFNWRyBjb29yZCBzcGFjZSAKICBjaXJjbGVFbC5zZXRBdHRyaWJ1dGVOUyhudWxsLCAnY3gnLCBtb3VzZUNvb3Jkc0luQ2FudmFzU3BhY2UueCk7CiAgY2lyY2xlRWwuc2V0QXR0cmlidXRlTlMobnVsbCwgJ2N5JywgbW91c2VDb29yZHNJbkNhbnZhc1NwYWNlLnkpOwp9OwoKZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsIGUgPT4gewogIGNpcmNsZUVsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2MxJyk7CiAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vtb3ZlJywgaGFuZGxlTW91c2VNb3ZlKTsKfSk7Cl1dPgo8L3NjcmlwdD4KPGNpcmNsZSBpZD0iYzEiIHI9IjEwIiAvPgo8L3N2Zz4="></object>
</div>
Here is the SVG I use in the <object>:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<script type="text/javascript">
<![CDATA[
var circleEl;
const handleMouseMove = e => {
const mousePoint = new DOMPoint(e.clientX, e.clientY);
const mouseCoordsInCanvasSpace = mousePoint.matrixTransform(e.target.getScreenCTM().inverse());
circleEl.setAttributeNS(null, 'cx', mouseCoordsInCanvasSpace.x);
circleEl.setAttributeNS(null, 'cy', mouseCoordsInCanvasSpace.y);
};
document.addEventListener('DOMContentLoaded', e => {
circleEl = document.getElementById('c1');
document.addEventListener('mousemove', handleMouseMove);
});
]]>
</script>
<circle id="c1" r="10" />
</svg>
I'm trying to solve a very simple problem: two elements; a button and a rectangle. When you hover over the button, the rectangle changes fill colour. I've tried CSS, but for some reason i can't get the 'className:hover targetClass{}' to work.
The main body is from Visio, and i've tried to edit it (*Edit:removed visio metadata):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
width="8.26772in" height="11.6929in" viewBox="0 0 595.276 841.89" xml:space="preserve" color-interpolation-filters="sRGB" class="st3">
<style type="text/css">
<![CDATA[
.st1 {fill:#5b9bd5;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.5}
.st2 {fill:#ffffff;font-family:Calibri;font-size:0.833336em}
.st3 {fill:#FFFF00;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
.button {fill:#5b9bd5;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.5}
.button:hover{fill: #FFFF00;}
]]>
</style>
<g id="ThePage">
<title>Page-1</title>
<g id="shape2" transform="translate(283.465,-531.496)">
<title>Multi-Attachment rectangle.2</title>
<desc>Button text</desc>
<rect x="0" y="799.37" width="56.6929" height="42.5197" class="button"/>
<text x="5.25" y="823.63" class="st2" >Button text</text>
</g>
<g id="shape1" transform="translate(255.118,-595.276)">
<title>Multi-Attachment rectangle</title>
<desc>Big box text</desc>
<rect x="0" y="756.85" width="113.386" height="85.0394" class="st1"/>
<text x="32.78" y="802.37" class="st2" >Big box text</text>
</g>
</g>
</svg>
My javascript code that I tried to implement but failed was:
var javaButton = document.getElementsByClassName('button');
for (var i = 0; i < javaButton.length; i++) {
javaButton[i].addEventListener('mouseover', mouseOverEffect);
javaButton[i].addEventListener('mouseout', mouseOutEffect);
}
function mouseOverEffect() {
this.classList.add("rect-highlight");
}
function mouseOutEffect() {
this.classList.remove("rect-highlight");
}
Where "rect-highlight" is in the CSS part of the svg as: .rect-highlight {fill: #ec008c;}.
I know this works, as the button changed colour if I hover over it, however need to get the context from "this" to another element. How do I do that?
*Edit: removed visio metadata
**Edit : added code body
***Edit: added code fences so markdown doesn't eat my code.
Not sure what your issue is, since you did not provide a sample SVG, but if you want to highlight related elements you can use a :hover selector.
You can get the previous and next sibling of the current element by accessing previousElementSibling and nextElementSibling respectively.
const showSiblings = (e) => toggleSiblings(e.target, true);
const resetSiblings = (e) => toggleSiblings(e.target, false);
Array.from(document.querySelectorAll('.box')).forEach(box => {
box.addEventListener('mouseenter', showSiblings);
box.addEventListener('mouseleave', resetSiblings);
});
function toggleSiblings(curr, visible) {
let prev = curr.previousElementSibling;
let next = curr.nextElementSibling;
if (prev) {
prev.classList.toggle('sib-prev', visible);
}
if (next) {
next.classList.toggle('sib-next', visible);
}
}
svg { background: #FF7F7F; }
.box { stroke-width: 4; cursor: pointer; }
.foo { fill: #4C4C7F; stroke: #00007F; }
.foo:hover { fill: #7F7FFF; }
.bar { fill: #7F7F4C; stroke: #7F7F00; }
.bar:hover { fill: #FFFF7F; }
.sib-prev.box {
stroke: #FF0000;
}
.sib-next.box {
stroke: #00FF00;
}
<svg width="260" height="196">
<rect class="box foo" x="6" y="6" width="120" height="40" />
<rect class="box bar" x="6" y="54" width="120" height="40" />
<rect class="box foo" x="6" y="102" width="120" height="40" />
<rect class="box bar" x="6" y="150" width="120" height="40" />
<rect class="box bar" x="134" y="6" width="120" height="40" />
<rect class="box foo" x="134" y="54" width="120" height="40" />
<rect class="box bar" x="134" y="102" width="120" height="40" />
<rect class="box foo" x="134" y="150" width="120" height="40" />
</svg>
When you really need a javascript solution, go for the answers with javascript.
This answer, however, shows a simple non-JS solution using vanilla CSS. You'll see a button and a SVG square. By simply using CSS :hover and :focus on both button and svg the color of the square changes 4 times...
/*
CSS Selector Reference
https://www.w3schools.com/cssref/css_selectors.asp
*/
svg { fill: red; width: 100px }
svg:hover { fill: purple }
button:hover + svg { fill: lime } /* + = immediate sibling selector */
button:focus + svg { fill: blue }
<button>hover, click and unfocus me</button>
<svg viewbox="0 0 100 100"><rect width="100" height="100" x="0" y="0" /></svg>
I wanted to fiddle around with this, because I have an interest in doing cool things with SVG exported from Visio. There may be more elegant ways to solve your problem, as suggested and demonstrated by the other posters, but perhaps my attempt will be helpful anyway.
I've created a jsFiddle that does what you want, I think. Have a look:
https://jsfiddle.net/visioguy/nv3ew0fh/
First, I made a few changes to your the <svg> code:
I gave the top-most the <g> an id="ThePage", so that I could avoid it in the js code.
I set class="button" on the the <g> that contains the rectangle, rather than at the "sub-level" rectangle, where you had it.
I added pointer-events="none" to the elements inside the button shape's group. When you mouse-over the <text> element it caused mouseout to fire, even though the cursor was still within the group. This pointer-events setting stops that behavior, but now you can't select/copy the text. That might be just fine.
There are a few styles in a separate CSS area in the jsFiddle.
Here are the CSS style additions:
/*
Make the SVG big enough to see and give
it a subtle color:
*/
svg {
background: whitesmoke;
width: 500px;
height: 500px;
}
/*
Highlight direct <rect> children of any <g>
that has this class:
*/
.rect-highlight > rect {
fill: red;
}
And here is the javaScript. I used querySelectorAll to find shapes according to CSS rules. If you add other non-button boxes to your <svg>, this code will find them and highlight them:
// Select all <g> elements that are classed as 'button':
let buttonShapes = document.querySelectorAll('.button');
console.log("buttonShapes: ", buttonShapes.length);
// Add the event handlers to all of these button shapes:
for(let buttonShape of buttonShapes) {
buttonShape.addEventListener('mouseenter', mouseEnterEffect);
buttonShape.addEventListener('mouseout' , mouseOutEffect);
}
function mouseEnterEffect(){
// Select all other <g> in the SVG that are not classed as button
// and are not id'd as ThePage:
let otherShapes = document.querySelectorAll('g:not(.button):not(#ThePage)');
console.log("otherShapes:", otherShapes.length);
for(let g of otherShapes) {
g.classList.add("rect-highlight");
}
}
function mouseOutEffect(){
// Select all shapes that are groups <g> and are classed
// with "rect-highlight":
let highlightShapes = document.querySelectorAll('g.rect-highlight');
console.log("highlightShapes:", highlightShapes.length);
for(let g of highlightShapes) {
g.classList.remove("rect-highlight");
}
}
One last note: you can remove all of the extra elements and attributes that Visio adds. Essentially anything that starts with "v:". This is meta data that Visio can read if you decide to re-import the svg into Visio at a later time. Things like Shape Data fields, User-defined cells, layers, text-formatting and other info is stored in these tags.
So I have a svg pattern which has 9 dots (3x3) inside with a transparent background. I have brought this in my html as an object, because I also have to change the color of the dots, I dont think I can do it with just CSS.
Now I need to repeat this object so I would have fullscreen worth of dots? How would I accomplish that?
So, it is possible to use CSS to change dots color. For example:
<object id="object" type="image/svg+xml" data="/paht/to/mysvg.svg"></object>
var a = document.getElementById("object");
var svgDoc = a.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "* { fill: #000 }";
svgDoc.documentElement.appendChild(styleElement);
And you can access to each childs(dots) in your root(svgDoc.documentElement) and manupulate it as you want, for example to multiply dots and so on via svgDoc.documentElement.childNodes.
I personally like the SVG use tag:
<svg class="icon">
<use xlink:href="#svg-icon" />
</svg>
<svg id="defs" style="display:none">
<defs>
<symbol id="svg-icon" viewBox="0 0 13 13">
<path d="M2,2 L11.1923882,11.1923882"></path>
<path d="M11.1923882,2 L2,11.1923882"></path>
</symbol>
</defs>
</svg>
This example draws you an 'X'. I can style it with CSS by targeting the <svg>:
.icon {
fill: none;
stroke-width: 2;
stroke: red;
}
Props to CSS-Tricks, where I originally picked this up.
I want to slice images in my html document using CSS.
Here is how I want to slice the image. I've masked it with red color:
<div class="img_section" >
<img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" >
</div>
I don't want to use a mask layer to hide the image, because the background of document is not a solid color. I used border-radius property to do it but I couldn't. If it's not possible with CSS , so isn't it possible with js too?
You could do this using svg's clipPath to clip the image and foreignObjectto import the html within svg, since you could only apply svg clipPath to a svg element.
<svg width="445" height="257">
<clipPath id="clip">
<path d="M0,0 h444 l-130,257 h-314z" />
</clipPath>
<foreignObject clip-path="url(#clip)" width="445" height="257">
<div class="img_section">
<img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" />
</div>
</foreignObject>
</svg>
You can do that with CSS layer max, I wrote an example to create what you want, overlayed with black mask.
HTML Code:
<div class="img_section" >
<img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" >
<div class="image-arrow"></div>
</div>
CSS:
.img_section{
width:445;
height:257px;
position:absolute;
}
.image-arrow{
width: 0;
height: 0;
border-bottom: 257px solid black;
border-left: 130px solid transparent;
position:absolute;
right: 0;
bottom: 0;
}
There is no such way in CSS to slice the images this can only be done in LESS and SASS but you can use multiple images as a sprite (single image multiple icon)
Check this out
I'm not certain, but I think you may be looking for clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Browser support is rather patchy (as of July 2015), however. http://caniuse.com/#search=clip-path