Consider this simple SVG document:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
text { font-size: 400%; }
#keyframes basic {
0% { transform: translateY(-100px); opacity: 0; }
100% { transform: translateY(100px); opacity: 1; }
}
.basic { animation: basic 1s linear infinite; }
</style>
<title>SVG Animation using CSS: Bounce</title>
<text class="basic" x="150" y="200">SVG</text>
<text x="100" y="200">–</text>
</svg>
JSFiddle here
It animates just fine in Firefox and Chrome. In Safari, however, only the opacity property is animated, and only the first translateY (that of 0%) is taken into account. (Tested in Safari version 10.0.3)
Using the exact same CSS and applying them in an HTML document, to a <p> for example, the animations work fine everywhere, including Safari.
Does Safari not support animation of translate in SVG? And where can I check whether it's supported?
Safari does not support animation of the <text> element! Wrapping the text inside a group fixes the issue:
<g class="basic">
<text x="150" y="200">SVG</text>
</g>
JSFiddle
This does not answer the second question however, where can one check whether that property is animatable or not in theory, and in practice?
Related
I've made a svg with video display inside like this :
<video muted loop width="852" height="480" autoplay class="svg-clipped-text" style=" margin: 0 auto;
display: block;">
<source src="<?php echo get_stylesheet_directory_uri(); >/vid/video.mp4" type="video/mp4">
</video>
<svg height="0" width="0">
<clipPath id="svgTextPath">
<text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Calibri" font-size="210px" font-weight="bold">
insider.
</text>
</clipPath>
</svg>
And my css :
.svg-clipped-text {
clip-path: url(#svgTextPath);
-webkit-clip-path: url(#svgTextPath);
}
It works properly in Chrome, in Firefox but no render in Safari.
I've tried things i've found on stackoverflow but nothing seems to resolved my problem..
Thanks !
For some reason an SVG mask doesn't work directly on a video in Safari, so you'll need to create a parent div and put the class on that.
This may require a bit of wrangling on the video itself, maybe setting 100% width and height.
I have created this svg with an external font, that part of the SVG looks like this:
<defs>
<style type="text/css">#import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika></style>
</defs>
In Chrome this works nice, but when I try to load the svg into GIMP the font is missing. Is there a way for GIMP to render the google fonts?
Complete test svg:
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">#import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika></style>
</defs>
<style>
text {
font-size: 30px;
font-family: Shadows Into Light;
}
</style>
<text x="20" y="35"><tspan>Test</tspan></text>
</svg>
Update: For the SVG to work in Gimp or Inkscape:
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'Shadows Into Light';
font-style: normal;
font-weight: normal;
src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('http://themes.googleusercontent.com/static/fonts/shadowsintolight/v3/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff') format('woff');
}
text {
font-size: 30px;
font-family: Shadows Into Light;
}
]]>
</style>
</defs>
<text x="20" y="35"><tspan>Test</tspan></text>
</svg>
The problem goes further than external Google fonts:
1) Gimp (or whatever SVG parser it uses) is picky about the syntax (normally the style should be in CDATA)
2) Even with the CDATA fix (that at least stop nasty messages in the Gimp console), Gimp won't abide to the font-family style, even for fonts installed system-wide.
I am using fabric JS 1.6.2. And after applied opacity to image object, generated SVG File. This svg file open in browser & InkScape. Both show much different in color.
Actually proof of canvas is generated different in color with SVG of InkScape. This issue is happened while applied opacity.
SVG With Browser:
Same Svg with InkScape
Original Image which added in design:
Here is content of SVG FILE :
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="380" height="380" viewBox="0 0 380 380" xml:space="preserve">
<desc>Created with Fabric.js 1.7.13</desc>
<defs>
</defs>
<g transform="translate(190 174) scale(0.543338 0.543338)">
<image xlink:href="1-original.jpg" x="-386.5" y="-500" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0.5;" width="773" height="1000" preserveAspectRatio="none"></image>
</g>
</svg>
Looks like it was a bug with 0.91 (I could reproduce that it looks paler there). Update to 0.92.3 (looked exactly the same as in the browser there).
Creating a svg from adobe xd and trying to create a hover effect for the svg can change fill: colors on hover.
# Heres the svg code #
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45">
<defs>
<style>
.cls-1 {
fill: #79bf73;
font-size: 45px;
font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}
</style>
</defs>
<text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>
# Heres the html code #
<div class="play">
<img src="http:localhost/mockup3/images/E101.svg" height="42" width="42">
</div>
# Heres the css code #
svg text #E101:hover{
fill: #003565;
}
SVGs inserted as img can't have interaction, they behave as images. To fix this, simply put the full SVG code inline. Cleaned up the code a bit, as these tools often produce ugly code.
HTML
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45" width="42" height="42">
<text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>
</div>
CSS
svg text {
fill: #79bf73;
font-size: 45px;
font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}
svg text:hover{
fill: #003565;
}
Keep in mind the icon will only be visible with the font Segoe MDL2 Assets installed.
I'm trying to create a simple SVG with ellipse elements, but in Safari (and only Safari), it's drawing all non-circular ellipses with doubled stroke width. If the ellipse is perfectly circular (rx == ry) then it draws it normally.
Has anyone seen this behavior before, or have any idea how to work around it? I'm seeing the behavior on macOS 10.12.1, Safari 10.0.1 (12602.2.14.0.7). It also only appears on my retina display (2014 MBP) and not on an external non-retina display.
Here's the html file I'm using:
<!DOCTYPE html>
<body>
<style>
circle {
stroke: blue;
stroke-width: 3;
fill: none;
}
ellipse {
stroke: green;
stroke-width: 3;
fill: none;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="40"/> <!--Draws with normal stroke-->
<circle cx="60" cy="60" r="40"/> <!--Draws with normal stroke-->
<ellipse cx="70" cy="70" rx="40" ry="20"/> <!--Draws with doubled stroke-->
<ellipse cx="80" cy="80" rx="20" ry="20"/> <!--Draws with normal stroke-->
</svg>
</body>
And here's a screenshot of the result:
This issue is with an underlying framework. It will be rectified in the next OS update.
https://bugs.webkit.org/show_bug.cgi?id=164505#c3