SVG shows not correctly in Firefox browser - firefox
I have next svg object which shown well in Chrome and AI, but it shows not correctly in Firefox. In my svg i have 2 textPath tags, i try to set italic font-style for both of them however only 1 textPath effected. How can i fix it if i still want 2 textPath elements be in 1 svg object?
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.13161635632674862"><text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Carter One';" itemzoom="0.4305468677769046 0.45416505875126006"><textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath><textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath></text></g><defs><path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path><style>#font-face {
font-family: 'Carter One';
src: local('Carter One'), local('CarterOne'), url(http://fonts.gstatic.com/s/carterone/v9/VjW2qt1pkqVtO22ObxgEBfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}</style></defs></svg>
The problem seems to be that the font you selected, Carter One, has no italics variant. So the browser needs to use a fallback (which, as far as I know, amounts to skewing the glyphs). Firefox seems to fail with the simultanuous task of "inventing" an italics font, painting a stroke and writing it on a text path.
It is not a problem to use multiple textPath elements inside one text. Only when using both a non-zero stroke-width and font-style:italics a font with a known italics style needs to be referenced. For example Lato has one:
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
<text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
<textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
<textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath>
</text>
</g>
<defs>
<path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
<style>
#font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
</defs>
</svg>
As an aside, while I don't know exactly which browsers support it, at least most modern browsers seem to know the paint-order CSS property, which removes the need to paint the text twice. paint-order:stroke paints the stroke below the fill:
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
<text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
<textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;paint-order:stroke" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
</g>
<defs>
<path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
<style>
#font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
</defs>
</svg>
Related
Part of SVG changing in animation on hover
Included here is an image of the svg file (could not upload svg file) I would like to hover mouse over, and radiantly change background (to blue) only of the circle, from the inner circle to the edges, as an animation. Even better if the animation was kind of wobbling effect from the middle of the circle and outwards. Nice if it was kind of "random" looking, the blue wobbling effect. Important it's animating from the middle of the circle, out towards the edge until the whole circle is blue. When mouse/hover is removed then the animation is backwards. Is that possible in svg/css land and can someone point towards the right direction?
This is a slightly hacky way to do it, using a blue circle with a black stroke that starts so thick it fills its interior. Hovering over the circle causes the stroke to shrink to nothing.
.logo-background {
fill: blue;
stroke: black;
stroke-width: 200;
transition: stroke-width 500ms;
}
.logo-background:hover {
stroke-width: 0;
}
.logo {
fill: none;
stroke: white;
stroke-width: 5;
pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" height="100px">
<defs>
<clipPath id="circle-clip">
<circle cx="100" cy="100" r="100" />
</clipPath>
</defs>
<circle class="logo-background" cx="100" cy="100" r="100" clip-path="url(#circle-clip)" />
<rect class="logo" x="60" y="60" width="80" height="80" rx="5" ry="5"/>
</svg>
Why does simple animation cause a very long update layer tree?
Paste this code on any site with a heavy interface (twitter for example) and run a performance test: <div style="position: absolute; contain: strict; width: 100vw; height: 100vh; z-index: 2000; top: 0; left: 0; background: white; backface-visibility: hidden;"> <svg viewBox="0 0 100 100" height="40px"> <rect width="40" height="40" x="93.5319"> <animate attributeName="x" dur="1000ms" repeatCount="indefinite" from="0" to="100"></animate> </rect> </svg> </div> For incomprehensible reasons to me, the "update layer tree" takes several ms on the core i7 4770k: example on twitter.com And if you insert the same code on an empty page, then everything works very quickly. Why is this happening and how to fix it?
animated svg mask doesn't work in firefox
h1 everyone, i'm trying to make a cross-browser animation based on svg mask for svg elements. At first, I caught a bug with css, in firefox mask doesn't work with css 'width' and 'height', only with inline properties. So, next question - how to animate mask for firefox, nothing harder that 'width resize'. https://codepen.io/flyby/pen/KmYOgb
<div id='cont'>
<svg>
<defs>
<mask id='rectMask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
<rect x='0' y='0' id='maskRect' width='700' height='850'/>
</mask>
</defs>
<path id='maskedPath' d='m 0,0 l 650,0 -100,850 -550,0 z' mask='url(#rectMask)'/>
<path id='riverPath' d='m 653,0 l -100,850' mask='url(#rectMask)'/>
<path id='notMaskedPath' d='m 655,0 l 650,0 0,850 -750,0 z'/>
</svg>
</div>
CSS:
body {
margin:0;
padding:0;
overflow:hidden;
}
#cont {
width:100vw;
height:100vh;
background-color:rgb(50,50,50);
}
svg {
width:100%;
height:100%;
}
#maskedPath {
stroke:none;
fill:rgb(230,230,230);
}
#notMaskedPath {
stroke:none;
fill:rgb(230,230,230);
}
#riverPath {
stroke:rgb(50,160,240);
stroke-width:8;
fill:none;
}
#maskRect {
width:0px;
height:850px;
fill:white;
stroke:none;
animation: resize 3s linear infinite;
}
#-moz-keyframes resize {
50% {width: 700px !important;}
0%,100% {width: 0px !important;}
}
Like you have discovered, your can't (yet) set geometric properties, like width and height of SVG elements in Firefox. It's not a bug. It's just an SVG 2 thing that Firefox has not implemented yet, but Chrome has.
The solution is to use the built-in SVG ("SMIL") animation elements, instead of CSS animation.
body {
margin:0;
padding:0;
overflow:hidden;
}
#cont {
width:100vw;
height:100vh;
background-color:rgb(50,50,50);
}
svg {
width:100%;
height:100%;
}
#maskedPath {
stroke:none;
fill:rgb(230,230,230);
}
#notMaskedPath {
stroke:none;
fill:rgb(230,230,230);
}
#riverPath {
stroke:rgb(50,160,240);
stroke-width:8;
fill:none;
}
#maskRect {
fill:white;
stroke:none;
}
<!--this animation doesn't work in FIREFOX, and not tested in IE11 ad Edge YET, WILL BE FIXED SOON (I HOPE)-->
<div id='cont'>
<svg>
<defs>
<mask id='rectMask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
<rect x='0' y='0' width="0" height="850" id='maskRect'>
<animate attributeName="width"
keyTimes="0; 0.4; 0.5; 1"
values="0; 670; 670; 0"
dur="4s" repeatCount="indefinite"/>
</rect>
</mask>
</defs>
<path id='maskedPath' d='m 0,0 l 650,0 -100,850 -550,0 z' mask='url(#rectMask)'/>
<path id='riverPath' d='m 653,0 l -100,850' mask='url(#rectMask)'/>
<path id='notMaskedPath' d='m 655,0 l 650,0 0,850 -750,0 z'/>
</svg>
</div>
Light gray asset on black background - Blurry
I have a light gray SVG button in a label with black background. The SVG button seems 'blurry' / 'bolder' on the edges. This is not something I can notice when using a white background. I suppose it is related to the high contrast between background and asset colour. How can I get this better? Btw, I'm using the SVG has background image of a div and respecting the original size of image. CSS code of the div containing the SVG asset: position: absolute; z-index: 2; width: 42px; height: 42px; padding: 0px; border: 0px; top: 20px; right: 20px; background-image: url(/assets/images/icons/create-document-close-button.svg); background-repeat: no-repeat; background-color: transparent; background-size: 36px 36px; background-position: center center; transition: all 100ms ease-in-out; The SVG code: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <g id="States" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Buttons-&-States-(Documents-Steps)" transform="translate(-104.000000, -138.000000)"> <g id="Close-Button" transform="translate(104.000000, 138.000000)"> <g> <circle id="circle" fill="#E9EEF2" cx="18" cy="18" r="18"></circle> <polygon id="X" fill="#9FADB5" transform="translate(17.868000, 17.808000) rotate(-45.000000) translate(-17.868000, -17.808000) " points="16.968 23.616 18.768 23.616 18.768 18.672 23.736 18.672 23.736 16.944 18.768 16.944 18.768 12 16.968 12 16.968 16.944 12 16.944 12 18.672 16.968 18.672"></polygon> </g> </g> </g> </g>
firefox 35.0.1: svg mask animation doesn't work
after my firefox update to version 35.0.1 my svg animations doesn't work in firefox, but it was working in previous versions and it still works in firefox beta (36), nightly (37.0a2) and other browsers (opera, chrome, safari, modern ie):
html:
<svg version="1.1" id="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="53.758px" viewBox="-1061.986 3038.43 55 53.758" enable-background="new -1061.986 3038.43 188.279 53.758" xml:space="preserve">
<g id="logo-mask" >
<rect id="sygnet" fill="#FFFFFF" x="-1100" y="3038" width="100" height="50"/>
</g>
<g id="logo-black">
<rect id="sygnet" fill="#000000" x="-1100" y="3038" width="100" height="50"/>
</g>
</svg>
<div id="button">Click me!</div>
css:
body{
background-color: #777777;
}
#button{
margin-right: 100px;
display: block;
width: 100px;
height: 20px;
float: right;
background-color: #fff;
cursor: pointer;
text-align: center;
line-height: 20px;
}
js (using snap.svg):
$(document).ready(function(){
var s = Snap(),
svg = Snap.select('#logo-svg'),
logo = Snap.select('#logo-mask'),
logoBlack = Snap.select('#logo-black'),
mask = svg.rect(-1100, 2830, 280, 100).attr({
fill: 'white',
id: 'maska-logo'
});
logoBlack.attr({'mask': mask, 'opacity': 1});
});
$(document).on('click', '#button', function(){
var maska = Snap.select('#maska-logo');
maska.animate({
transform: 'T'+[0,200]
}, 500);
});
simple example: http://jsfiddle.net/7yq14L0f/2/
any idea, why? :(
It was caused by a change in the Firefox code which was not completely correct and which was then fixed. Bug 932771 caused it and bug 1127507 which was backported as far as Firefox 36 fixed it.