Why Doesn't This CSS Transition Work on Svg Inside an Anchor

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:

  1. The xmlns:xlink="http://www.w3.org/1999/xlink" namespace.

  2. 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:

  1. CSS doesn't apply across document boundaries, and
  2. 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



Leave a reply



Submit