The svg text animation looks different in some mobile devices - html
I tried to add a svg animation text to my webpage and hosted it to a github webpage.But when i open it in some mobile devices the text animation looks different.
Here is what is expected
Expected Text Animation
But in some mobile phones it looks like this
enter image description here
It only occurs in some mobile devices.
Here is the html and css of the text
html
<svg viewBox="0 0 1650 400">
<text x="50%" y="70%" fill="transparent" text-anchor="middle">
TECHNE
</text>
</svg>
css
svg text{
font-size: 7rem;
stroke: #0ed1c1;
font-size: 9rem;
font-weight: 700;
stroke-width: 5;
animation: textAnimate 5s infinite;
}
#keyframes textAnimate{
0%{
stroke-dasharray: 0 50%;
}
100%{
stroke-dasharray: 50% 0;
}
}
Related
How do I use an animated SVG for navbar link hover, and position it properly?
I’m building my portfolio and it has a theme as if it's been drawn on paper.
When you hover over a link on my navbar, the SVG animates from underneath, it's an arrow that points to the link and it looks like it's been drawn with a sharpie. I would also like to animation to reverse on mouse out, instead of just disappearing.
The animation works awesomely on hover (by itself), exactly as I want, however I cannot figure out how to make it appear on a navbar link hover instead. Also, I'm unsure how to position it. Currently I have the SVG placed after my <a> tags.
Here's the code:
div {
border: 1px black solid;
width: 120px;
height: 150px;
text-align: center;
}
#arrowSVG:hover path {
animation: nav_arrow 800ms linear 1 normal forwards;
}
#keyframes nav_arrow {
0%,
100% {
stroke-dashoffset: 228.816432;
}
60% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div>
<p> Hover me!
</>
<svg id="arrowSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
<path id="eZuEQXWsHpA2" d="M81.33906,95.61239c-2.04913-2.92733-15.33188-23.55344-18.27718-23.9216-2.1176-.2647-6.39806,6.74064-9.13859,
5.64442-1.72253-.68901-.23957-19.37568,1.07513-20.42744.35406-.28324,17.10175,10.91579,16.93327,12.09519-.24773,1.73411-10.42713,
4.21185-12.09519,4.56929-2.16723.46441-8.43321,2.60391-6.45077,1.61269c3.20375-1.60188,6.85172-2.25839,9.67615-4.56929.39226-.32094,
1.55594-1.2354,1.07513-1.07513-.88133.29378-11.28885,4.35372-11.28885,4.30051c0-2.22645,10.47757-5.91321,12.36397-5.91321c1.02153,
0-1.18114-1.93573-2.15025-1.61269-2.93453.97818-11.8009,6.50634-9.94494,4.03173c2.11065-2.81419,10.07996-2.15151,11.02006-4.03173.26335-.5267-10.04599,
1.11958-10.4825.53757-2.04355-2.72474,8.60103-2.59902,8.60103-3.76295c0-1.26705-8.19827,1.07445-8.86981,0-.76572-1.22515,1.75021-2.86552,
2.15026-3.49417.30422-.47805.18968-1.16541.53756-1.61269c1.16554-1.49856,2.42055,6.98982,3.76296,8.33224c4.42514,4.42514,10.96031-4.00183,9.40736,3.76295" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="228.816432" stroke-dasharray="228.816432" />
</div>
How to prevent an outline on SVG path when animating clip path?
I'm trying to get this animation to work in my website. For some reason the layered paths show through so a thin white outline for the path (that's animated in) is visible ruining the animation, despite the fact the paths are identical in size. I wondered if anyone has any suggestions on how to prevent this?
I've made a jsFiddle and added the code below. If you change the background for the body to black it's even clearer.
Any help would be appreciate.
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#rect {
animation: slideOver 5s linear infinite;
}
#keyframes slideOver {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}v
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path">
<rect id="rect" x="0" y="0" height="346" width="250"/>
</clipPath>
</defs>
<path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>
SVG animation acts funny in firefox
this is the code for the SVG animation.
This is the jsfiddle
#keyframes rotate {
100%{
transform: rotate(360deg);
}
}
#rotate {
transform-origin: 50% 50%;
transform-box: fill-box;
animation: rotate 3s linear infinite;
}
#rotate > rect {
transform: translate(12px, 12px);
}
<svg id="H1XgaUeE3lX" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 387">
<g id="rotate">
<rect x="50" width="100" height="20" y="50"/>
</g>
</svg>
the animation changes depending on which browser I open the code in.
it works fine in chrome but doesn't work in Firefox.
the axis of rotation changes depending on which brouser it is opened in.
SVG reverse drawing css animation cross-browsers
I'm fighting with CSS SVG animations and I found the problem which I cannot overcome. My animation works properly in Chrome, Opera and Firefox but Safari has a problem with it - inside circles should draw itself anticlockwise.
Anyone know how to solve this?
Thanks!
.padding {
padding-left: 20px;
padding-right: 20px;
background-color: grey;
}
svg .cog-one,
svg .cog-two {
stroke-dasharray: 390;
stroke-dashoffset: 390;
transition: all 1s linear;
}
svg .circle-one {
stroke-dasharray: 100%;
stroke-dashoffset: -100%;
transition: all .6s linear .3s;
}
svg .cog-two {
transition-delay: .3s;
}
svg .circle-two {
stroke-dasharray: 100%;
stroke-dashoffset: -100%;
transition: all .6s linear .6s;
}
svg:hover .cog-one,
svg:hover .cog-two {
stroke-dashoffset: 0;
}
svg:hover .circle-two {
stroke-dashoffset: 0%;
}
svg:hover .circle-one {
stroke-dashoffset: 0%;
}
<svg width="250" height="250" viewbox="0 0 162.95 117.37" class="padding">
<path fill="none" stroke="#231f20" stroke-width="5.5" d="M2331.44,513.63a0.3,0.3,0,0,1-.4,0l-9.58-7.17-1.23.61a35.5,35.5,0,0,1-4.16,1.73l-1.3.44-1.7,11.91a0.31,0.31,0,0,1-.09.18,0.32,0.32,0,0,1-.23.09h-16.1a0.32,0.32,0,0,1-.33-0.26l-1.73-11.87-1.29-.44a35.49,35.49,0,0,1-4.19-1.68l-1.24-.61-9.69,7.29a1.23,1.23,0,0,1-.63.19l-11.34-11.32a0.9,0.9,0,0,1,.14-0.68l7.4-9.8-0.61-1.24a35.42,35.42,0,0,1-1.73-4.15l-0.45-1.3-11.91-1.69a0.32,0.32,0,0,1-.27-0.31V467.49a0.31,0.31,0,0,1,.09-0.23,0.31,0.31,0,0,1,.18-0.09l11.89-1.7,0.44-1.3a35.2,35.2,0,0,1,1.72-4.15l0.61-1.23-7.21-9.6a0.35,0.35,0,0,1,0-.44l11.38-11.38a0.35,0.35,0,0,1,.43,0l9.62,7.22,1.21-.59a35.09,35.09,0,0,1,4.18-1.74l1.3-.44,1.69-11.9a0.31,0.31,0,0,1,.09-0.18,0.32,0.32,0,0,1,.23-0.09h16.1a0.31,0.31,0,0,1,.31.27l1.71,11.89,1.3,0.44a35.08,35.08,0,0,1,4.18,1.7l1.23,0.6,9.65-7.25a0.45,0.45,0,0,1,.49,0L2343,448.59a0.46,0.46,0,0,1,0,.49l-7.29,9.69,0.61,1.23a35.49,35.49,0,0,1,1.72,4.16l0.44,1.3,11.9,1.7a0.31,0.31,0,0,1,.27.31v16.1a0.32,0.32,0,0,1-.09.22,0.31,0.31,0,0,1-.18.09l-11.9,1.7-0.44,1.3a35.25,35.25,0,0,1-1.73,4.15l-0.61,1.23,7.19,9.59a0.3,0.3,0,0,1,0,.4Z" transform="translate(-2256.03 -406.85)" class="cog-one"></path>
<circle fill="none" stroke="#231f20" stroke-width="2.75" cx="48.67" cy="68.69" r="20.8" class="circle-one"></circle>
<path fill="none" stroke="#231f20" stroke-width="5.5" d="M2411.82,460.56a0.22,0.22,0,0,1-.25.14l-8.39-2.1-0.65.75a25.64,25.64,0,0,1-2.29,2.31l-0.74.66,2.2,8.41a0.22,0.22,0,0,1,0,.14,0.23,0.23,0,0,1-.12.13l-10.74,4.52a0.22,0.22,0,0,1-.28-0.09l-4.47-7.42-1,.07a25.64,25.64,0,0,1-3.26,0l-1-.06-4.41,7.56a0.89,0.89,0,0,1-.37.3l-10.72-4.37a0.65,0.65,0,0,1-.1-0.49l2.19-8.6-0.75-.65a25.59,25.59,0,0,1-2.31-2.28l-0.66-.74-8.4,2.2a0.23,0.23,0,0,1-.27-0.13l-4.5-10.72a0.23,0.23,0,0,1,0-.18,0.22,0.22,0,0,1,.09-0.11l7.45-4.46-0.07-1a25.43,25.43,0,0,1,0-3.25l0.06-1-7.49-4.38a0.25,0.25,0,0,1-.12-0.29l4.4-10.76a0.25,0.25,0,0,1,.29-0.13l8.43,2.12,0.64-.73a25.35,25.35,0,0,1,2.3-2.33l0.74-.66-2.2-8.4a0.23,0.23,0,0,1,0-.15,0.23,0.23,0,0,1,.12-0.13l10.72-4.51a0.23,0.23,0,0,1,.28.09l4.46,7.44,1-.07a25.34,25.34,0,0,1,3.26,0l1,0.06,4.4-7.53a0.33,0.33,0,0,1,.31-0.17l10.76,4.4a0.33,0.33,0,0,1,.11.34l-2.15,8.49,0.75,0.65a25.64,25.64,0,0,1,2.31,2.29l0.66,0.74,8.4-2.19a0.23,0.23,0,0,1,.27.13l4.5,10.72a0.23,0.23,0,0,1,0,.18,0.23,0.23,0,0,1-.09.11l-7.45,4.46,0.07,1a25.46,25.46,0,0,1,0,3.25l-0.06,1,7.47,4.38a0.22,0.22,0,0,1,.08.28Z" transform="translate(-2256.03 -406.85)" class="cog-two"></path>
<circle fill="none" stroke="#231f20" stroke-width="2.75" cx="2383.36" cy="442.66" r="14.33" transform="translate(-2241.52 550.51) rotate(-22.78)" class="circle-two"></circle>
</svg>
If Safari is drawing the circle the wrong direction, then that will be a bug in Safari. The SVG spec is clear on which direction strokes are meant to go. You may wish to report that bug to Apple. The way to resolve your immediate problem would be to convert your <circle> elements to <path> elements. That way you control the path direction.
How to show SVG donut chart in IE?
I have created a very nicely animated chart that looks like this. <div>Some percentage</div> <div class="bigbox"> <div class="centered"> <div class="item t1"> <div class="graphicsContent">51%</div> <svg width="144px" height="144px" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <circle id="circle1" class="circle_animation" r="56" cy="72" cx="72" stroke-width="16" stroke="blue" fill="none"/> </g> <g> <circle id="innerCircle1" r="44" cy="72" cx="72" stroke-width="2" stroke="#b1b1b1" fill="none"/> </g> </svg> </div> </div> </div> As you can see, I used SVG. It seems to work fine anywhere else but in IE. I read that IE has a lot of issues regarding CSS3 animations. SMIL doesn't seem to solve my problems. And I don't even care if the graphic is completely animated in IE as long as it just shows the whole content. Should I stay away from SVG if I want to create a cross-browser solution or is there something I should add to achieve the desired (or even partially desired) result in IE? I would appreciate any suggestion.
Dash-arrayoffset animated
**Does not work in IE**, even if the [documentation][1] does say its css animatable
So **[Harry][2]** converted it to use dash-array instead.
I reveresed the prosess with: animation: t1 1s ease-out reverse forwards;
Why would you do that?
Because when an animation fails in IE it goes back to its initial value.
The old initial value was: stroke-dasharray: 351.68;
this is 0% of the circle
The new initial value is: stroke-dasharray: 170.7, 351.68;
and this is about 51% of the circle.
.bigbox {
width: 50%;
}
.item {
position: relative;
}
.graphicsContent {
text-align: center;
position: absolute;
line-height: 144px;
width: 100%;
font-size: 1.250em;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 170.7, 351.68;
}
.t1 .circle_animation {
-webkit-animation: t1 1s ease-out reverse forwards;
animation: t1 1s ease-out reverse forwards;
}
#-webkit-keyframes t1 {
0% {
stroke-dasharray: 170.7, 351.68;
}
100% {
stroke-dasharray: 0, 351.68;
}
}
#keyframes t1 {
0% {
stroke-dasharray: 170.7, 351.68;
}
100% {
stroke-dasharray: 0, 351.68;
}
}
<div>Some percentage</div>
<div class="bigbox">
<div class="centered">
<div class="item t1">
<div class="graphicsContent">51%</div>
<svg width="144px" height="144px" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle1" class="circle_animation" r="56" cy="72" cx="72" stroke-width="16" stroke="blue" fill="none" />
</g>
<g>
<circle id="innerCircle1" r="44" cy="72" cx="72" stroke-width="2" stroke="#b1b1b1" fill="none" />
</g>
</svg>
</div>
</div>
</div>
As you say, 'SMIL doesnt seem to your your problems' - The reason behind this is because IE does not suspport SVG SMIL animation - as you can see here http://caniuse.com/#search=svg%20animation Would you be happy with the whole chart (i.e. the circle and the blue bar with percentage) being displayed, or just the percentage without the circle?