Why Doesn't This CSS Transition Work On SVG Inside an Anchor
The reason why the transition doesn't work is because it is within a link.
To fix it, put the link inside of the SVG instead like this SO post suggests
OR
Make the SVG a sibling of the link and use the sibling selector
/* This goes within `a { ...` */
&:hover + svg { /* Or use ~ to select all */
.the-background
{
fill: black;
}
.the-icon
{
fill: red;
}
}
a link breaks SVG path transition in Safari
I create a "fake-link" object in JS to use whenever this is the case. I can then attach '.fake-link' to any HTML element to replicate your standard <a>
tag.
The JS:
/**
* Link namespace
*/
Link = function() {
};
/**
* Fake a link
*/
Link.prototype.openLink = function(el) {
var link = $(el).attr('data-href');
var win = null;
win = window.open(link, '_self');
win.focus();
};
window.Link = new Link();
$(function(){
$(document).on('click', '.fake-link', function(e) {
e.stopPropagation();
window.Link.openLink($(this));
return false;
});
});
Some HTML:
<span class="fake-link" data-href="/about">
<svg>
INLINE SVG CONTENT HERE
</svg>
</span>
SVG + css3 animation not working with link markup
This can be done using pure CSS3 and HTML5. The trick is to embed the link inside the svg by using the xlink element with the target set to parent:
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="../index.html" target="_parent">
<rect id="one" width="63.9" height="63.9" class="style3"/>
<ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
</a>
</svg>
The two important bits:
The
xmlns:xlink="http://www.w3.org/1999/xlink"
namespace.The actual link:
<a xlink:href="../index.html" target="_parent"> </a>
Note: This method has only been tested using the <object>
method of embedding the SVG.
CSS animation do not work for svg in img
You can't animate the internals of an <img>
from the outside. Even if it is an SVG. There are two reasons for this:
- CSS doesn't apply across document boundaries, and
- Images referenced via an
<img>
must be self contained.
Animations should work if you put the CSS inside the external SVG (in a <style>
element as normal).
Note also that you will need to change the way you do transform-origin
. The way it works in Chrome is convenient, but it is wrong according to the current spec. It won't work on other browsers like Firefox.
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.rotate-45 {
transform-origin: 0px 0px;
transform: rotate(45deg);
}
.rotate {
transform-origin: 0px 0px;
animation: rotate 1s ease-in-out infinite;
}
.rotate-back {
transform-origin: 0px 0px;
animation: rotate 1s ease-in-out infinite;
animation-direction: alternate;
}
.left {
animation: move 1s ease-in-out infinite;
}
.right {
animation: move 1s ease-in-out infinite;
}
@keyframes rotate {
100% {
transform: rotate(135deg);
}
}
@keyframes move {
50% {
transform: translate(-30px, -30px);
}
}
</style>
<g transform="translate(500,500)">
<rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none"/>
<rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none"/>
<g transform="translate(-50,0) rotate(-45)"><polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g>
<g transform="translate(50,0) rotate(135)"><polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g>
<text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text>
</g>
</svg>
SVG css3 transition on fill not working when there is external link
This is actually something to do with the visited state. The reason the other commenters are saying it works is because they haven't been to your pages before. Once they have it will no longer work. I've tried adding visited states in the CSS and it makes no difference.
The easiest solution I've found is to just add a random query string to the url so the page is effectively not visited eg:
<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>
Most sites will ignore a query they don't recognise so that should be ok. Or better would be to remove it with JS on click.
$('body').on('click', 'a', function(e) {
e.preventDefault();
var url = $(this).prop('href');
window.location.href = url.split("?")[0];
});
CSS transition on the mask of an SVG?
It is not really the mask
property that can't be animated, but the url()
<func>.
To create a transition, you need to have a state 1 that goes to a state 2 with the possibility to create an interpolation between both states.
When you use url(#1)
and wish to go to url(#2)
, there is no way to create any interpolation between these two states, because url(#1.5)
will not be the in-between state.
What can be animated though is the content of your mask.
In SVG2, you can set directly the properties that did change (i.e cx
and cy
) from CSS, but this is still only supported by Blink&Safari browsers:
<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1208 604">
<style type="text/css">
/* <![CDATA[ */
.mask_hover a:link,
.mask_hover a:visited {
mask: url(#mask);
}
#mask > circle {
transition-property: cx, cy;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
.mask_hover a:hover + defs #mask > circle,
.mask_hover a:active + defs #mask > circle {
cx: 416;
cy: 216;
}
/* ]]> */
</style>
<g class="mask_hover">
<a xlink:href="#">
<image id="img" width="1208" height="604" xlink:href="https://i.stack.imgur.com/LCpGU.jpg"/>
</a>
<!-- we need to move it here so we can target it with our CSS rules -->
<defs>
<mask id="mask">
<circle id="circle_l" cx="809" cy="337" r="202" fill="#fff"/>
</mask>
</defs>
</g>
</svg>
What's preventing my CSS3 SVG animation?
The problem, as it turns out, has something to do with the visited state of the linked SVG. This is reproducible with the both the codepend and code snippet I provided in my initial post. If you click the SVG link it will take that iFrame to the stackoverflow index or the codepen index. If you then hit the browser back button the animation will stop. This is a bug in both Safari and Google Chrome. Firefox seems to work through this bug.
Using CSS transition on SVG transform scale
transition comes with CSS rules from style sheets, what you do is to add an attribute.
If you use CSS transition via style sheets, it works fine i believe : DEMO TEST via CSS & attribute
CSS of demo
a:focus + svg #bbb {
transform:scale(4);
}
#bbb {
transition:1s;
}
svg {
vertical-align:top;
}
a:focus {
pointer-events:none;/* demo purpose*/
}
And HTML used for demo purpose .
<a tabindex="0"> toggle zoom circle CSS only </a>
<svg version="1.1"
CSS transform rotate animation does not work on anchor elements in Firefox
CSS Transforms Module Level 1 - Terminology - Transformable Element
A transformable element is an element in one of these categories:
- an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption
- an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.
There are some cross-browser inconsistencies, but in order for the transform
property to have an effect on the element, the display
property shouldn't be inline
.
Anchor elements are inline
by default, therefore you need to change the display
to inline-block
or block
in order for it to work in Firefox. Changing the display
property's value to inline-block
renders the elements as atomic inline-level elements, and therefore the elements become "transformable" by definition.
Updated Example
#spinner {
display: inline-block;
}
Related Topics
Margin-Top Percentage Does Not Change When Window Height Decreases
Google Chrome, Flash and Z-Index Wrong Behaviour
React Rtl. Conditional Import CSS
Use Variable Defined in Config.Rb in SCSS Files
Make a CSS Triangle/Arrow Grow When Its Parent Div Is Resized
Opera and Custom Cursor in CSS
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)
Add a Twitter Share Button to Shiny R Navbar
Leaflet for R: How to Change Default CSS Cluster Classes
Make Input Value Uppercase in CSS Without Affecting the Placeholder
How to Nest Media Queries Within Media Queries
CSS Fluid Layout: Margin-Top Based on Percentage Grows When Container Width Increases
Font-Weight Is Not Working Properly
How to Solve the Table Row Background Image Problem, in Chrome, in Multi Celled Tables
Clamping Lines Without '-Webkit-Line-Clamp'