HTML
<svg viewBox="0 0 1024 1024">
<path d="M624 96h16l192 224v576.295c0 34.963-28.617 63.705-63.918 63.705h-480.165c-35.408 0-63.918-28.759-63.918-64.235v-735.531c0-35.488 28.693-64.235 64.088-64.235h335.912zM608 128h-320.142c-17.595 0-31.858 14.568-31.858 31.855v736.291c0 17.593 14.551 31.855 31.999 31.855h480.003c17.672 0 31.999-14.238 31.999-31.789v-544.211h-128.067c-35.309 0-63.933-28.37-63.933-64.189v-159.811zM640 144v143.719c0 17.828 14.421 32.281 31.896 32.281h118.503l-150.398-176zM320 320v32h224v-32h-224zM320 224v32h224v-32h-224zM320 416v32h416v-32h-416zM320 512v32h416v-32h-416zM320 608v32h416v-32h-416zM320 704v32h416v-32h-416zM320 800v32h416v-32h-416z" />
</svg>
CSS
svg { width:20px; height:20px; }
output 1 (Firefox 57.0.2)
output 2 (Chrome 63.0)
Scaling the image as shown above makes it look blurry. (https://jsfiddle.net/wutx56co/)
If you know the solution, I would like to answer. Thanks.
try applying this
svg {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
}
Related
I have a website where I fade in a set of SVG icons which have the filter: drop-shadow rule applied. This works fine on desktop, however on iOS the shadow gets cut off once the animation finishes.
For example, this is the html:
<div class="fade-in">
<svg class="shadow" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="white"/>
</svg>
</div>
The css:
#keyframes fade-in {
from {
opacity: 0.0;
}
to {
opacity: 1.0;
}
}
.fade-in {
animation: fade-in 2s;
}
.shadow {
filter: drop-shadow(0 0.1rem 0.7rem black);
}
JS Bin:
https://jsbin.com/yonifusomo/edit?html,css,output
Result on iOS after the animation finishes:
Safari has multiple bugs related to shadows and various animations. Luckily, looks like this one is not the worst. Adding a -webkit-transform: translateZ(0); property to your .fade-in class did the trick for me.
For more info: this post is pretty similar to yours, and it contains almost same advice.
I am trying to animate some elements of an image in svg. To test the animation I first tried it on the whole image to check that it works well (it does). But when I change the class state-indicator-illustration by the id note-double-1 (id of the element to animate) the element note-double 1 disappears completely without me understanding why.I specify that to test I inserted the image "line by line" in the HTML code.
Here is the code (i put jsfiddle to avoid very long message) :
JsFiddle: https://jsfiddle.net/pju2ateL/2/
Thanks for your help,
elshiri.
As I've commented: you need to remove the transform attribute of the path.
In order to preserve your transformations I am wrapping the path in a group and transform the group instead of transforming the path. Also I had to change the viewBox since otherwise the path falls outside the svg canvas.
As you can see the css animation is working.
/* .state-indicator-illustration is working */
#note-double-1 {
/*overflow: hidden;*/
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="244" height="149.388" viewBox="-15 -320 244 149.388">
<g id="off" transform="translate(-1090, -390)">
<g transform="translate(-28.904 -320.214)" >
<path id="note-double-1" d="M1114.926,434.328l5.138-22.688,22.647,1.41c-.05.226-.093.412-.133.6q-2.918,12.882-5.824,25.761a5.089,5.089,0,0,1-3.018,3.727,7.907,7.907,0,0,1-9.016-2.153c-2.277-2.776-1.476-6.41,1.8-7.774a7.7,7.7,0,0,1,8.184,1.341c.1.083.205.172.31.245h.067l3.237-14.3c-1.28-.081-2.527-.164-3.772-.245-4.355-.272-8.713-.535-13.066-.821-.412-.029-.524.113-.61.49-1.4,6.229-2.861,12.445-4.2,18.686a5.393,5.393,0,0,1-4.558,4.48,7.783,7.783,0,0,1-8.129-3.455,4.664,4.664,0,0,1,1.414-6.408,7.077,7.077,0,0,1,6.186-.777,8.54,8.54,0,0,1,1.767.758A17.8,17.8,0,0,1,1114.926,434.328Z"/>
</g>
</g>
</svg>
Is it possible to achieve such an effect in HTML5 and CSS3 , Please find the attached image
Here I have two divs with overflow:hidden, inside each is an image. And when I hover each image, the image zoom in or moves up or down inside this same div container. So basically the div works like a mask for the big image.
What I fail to achieve here is the shape of the div to mask the image. Is there a way to achieve that and can work in the latest versions of almost all browsers?
Thanks for you help !
For something like that, I would suggest two different possibilities:
Using CSS transformations (in particular skewY); or
Using SVG (with just some polygons)
Each of them has some good/bad things and will work in all the modern browsers and in mobile, as you can see in the caniuse.com website for transform and SVG.
Using CSS 2D Transformations
You would have a container div that would be skewed vertically, and then inside of it other divs with the skew (over)corrected. Then hiding the overflow so the excess of the contained divs is not shown.
You can see a demo here (or on this JSFiddle):
#skewed {
position:relative;
margin-top:20px;
width: 500px;
height: 300px;
transform: skewY(-2deg);
-webkit-transform: skewY(-2deg);
-moz-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
overflow:hidden;
background:black;
-webkit-backface-visibility: hidden;
}
#skewed div {
position:absolute;
height:200px;
width:500px;
transform: skewY(4deg);
-webkit-transform: skewY(4deg);
-moz-transform: skewY(4deg);
-o-transform: skewY(4deg);
overflow:hidden;
opacity:0.4;
transition:all 0.5s;
z-index:1;
background-size:100% 100%;
-webkit-backface-visibility: hidden;
}
#skewed div:hover {
opacity:1;
z-index:2;
background-size:110% 110%;
}
#top {
top:-50px;
left:0;
background:url(http://lorempixel.com/1000/400/animals) no-repeat center center;
}
#bottom {
top:150px;
left:0;
background:url(http://lorempixel.com/1000/400/people) no-repeat center center;
}
<div id="skewed">
<div id="top"></div>
<div id="bottom"></div>
</div>
About this solution:
Supported by all major browsers (except Opera Mini), although you'll need to use prefixes.
Easy to implement and extend with further content (text, links, etc.)
In Chrome, the edges look too sharp. Although this can be fixed using -webkit-backface-visibility: hidden as suggested by Neven in this answer.
Using SVG
Use polygons to define the basic shapes that you want to create.
I am not a SVG-expert, so I can't do anything fancy, but this is to get a general idea. Here is a simple demo (you can also see it on this JSFiddle):
polygon {
opacity:0.4;
transition:all 0.5s;
}
polygon:hover {
opacity:1;
}
<svg width="500" height="300" viewBox="0 0 500 300">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="300">
<image xlink:href="http://lorempixel.com/600/300/animals" x="0" y="0" width="600" height="300" />
</pattern>
<pattern id="img2" patternUnits="userSpaceOnUse" width="600" height="300">
<image xlink:href="http://lorempixel.com/600/300/people" x="0" y="0" width="600" height="300" />
</pattern>
</defs>
<polygon id="top" points="0,20 500,0 500,170 0,130" fill="url(#img1)" />
<polygon id="bottom" points="0,130 500,170 500,280 0,300" fill="url(#img2)" />
</svg>
About this solution:
Supported by all the major browsers (no need for prefixes or anything)
Highly customizable: I used polygons, but you could use paths and curves to give a more personal solution.
SVG is not as easy as the other solution (Ok, something as simple as this is easy, but something more complex will require some learning).
I am simply trying to make a Facebook icon in a SVG file grow in scale in its place. The problem is that it moves down and to the right. I want it to stay in position. Here is my code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px"
height="731.802px" viewBox="0 0 800 731.802" style="enable-background:new 0 0 800 731.802;" xml:space="preserve">
<style type="text/css" >
<![CDATA[
.facebook:hover {
fill:#3b5998;
stroke:#3b5998;
pointer-events:all;
opacity: 0.8;
transition: all .3s ease-in-out;
transition: transform 0.3s ease;
transform-origin: center center;
-webkit-transform: scale(1.3) translate(-8.6px, -8.6px);
-moz-transform: scale(1.3) translate(-8.6px, -8.6px);
-ms-transform: scale(1.3) translate(-8.6px, -8.6px);
transform: scale(1.3) translate(-8.6px, -8.6px);
}
]]>
</style>
<g id="Background">
<g>
<rect style="fill:#8CDDEA;" width="800" height="731.802"/>
</g>
</g>
<g id="Objects">
<g id="OBJECTS">
<path id="facebook" class="facebook" style="#4D4D4D;" d="M334.979,143.357c0,1.308,0,7.15,0,7.15h-5.322v8.744h5.322v25.983h10.933
v-25.983h7.336c0,0,0.687-4.193,1.02-8.777c-0.955,0-8.314,0-8.314,0s0-5.087,0-5.979c0-0.893,1.191-2.095,2.37-2.095
c1.176,0,3.658,0,5.956,0c0-1.191,0-5.304,0-9.103c-3.068,0-6.559,0-8.099,0C334.709,133.298,334.979,142.05,334.979,143.357z"/>
</g>
</g>
</svg>
If you don't want the icon to move, then just get rid of translate(-8.6px, -8.6px) in your transformations. By translating elements you move them around. Having set transform-origin: center center, scaling alone should give you the desired effect.
When looking at your code and the hovering effect, I suppose there might be an issue with your styles which could raise another question. If you want the hovering effect to behave symmetrically, i.e. have it being reverted when the mouse leaves the icon, you'll have to split your css definitions. You need to define the transition on the class .facebook along with the starting values for your icon. The target values where the transition will end will then be defined on .facebook:hover.
I put together a JSFiddle to demonstrate the effect.
How do I style the below attribute transform so that instead of becoming:
transform="translate(0,250)"
it becomes:
transform="translate(-45,250)"
so that it shifts the whole object -45 pixels to the left.
Below is the code:
<svg width="365" height="250">
<g class="x_ticks_d3 plain" transform="translate(0,250)"></g>
</svg>
If we talk about "styling" you can do sth. like this with CSS:
g.x_ticks_d3.plain {
-moz-transform: translateX(-45px);
-webkit-transform: translateX(-45px);
-o-transform: translateX(-45px);
-ms-transform: translateX(-45px);
transform: translateX(-45px);
}
But this is NOT changing the svg translation and furthermore the 250 in your svg might not always match pixels (remember the scalable vector thing).
The more promising way is manipulating the attribute using jQuery:
$("g").attr("transform", "translate(-45,250)");