Hi guys im trying to do this in css/sass only! The border have to change on rollover and the background could be an image! I tried SVG and clipPath, transform3d without any success!Example here
Create the container div and use transforms in CSS to give the entire element the 3d effect. You can look this up and play with the values to your liking.
Make the background image the background of the container div to keep it simple.
Use an SVG to draw the controller icon. There are some tutorials out there on how to export a path for an SVG using GIMP, at least that is what I do for complicated shapes like this.
Ok, this is best done like this, first the html structure:
<div id="imageContainer" class="center">
<h2>Lets go and see how it goes</h2>
<img class="pic" src="https://moltopiccolo.files.wordpress.com/2012/01/cool- drinks.jpg">
</div>
This means, you have a container div and place your img in that container, it is important to not have the img as div background in this instance.
Second, position the div relative, the image absolute.This will only work if the image is positioned absolute.
Now declare a clip path, there are generators for different shapes with previews etc, check the codepen for the correct declarations.
Give a transition to the clip path, make sure to use the prefixes.
Now it is up to you wheter you want to trigger the animation on hover, this can be done with css. If you want the animations triggered on click, you can do that in JS and change the clip paths with JS.
I think the border animation needs no explanation, this is the very easiest part, if you need help with that, let me know.
Here is the link, hover over the picture and see:-)
http://codepen.io/damianocel/pen/KdobyK
There is the workaround that we found. It will need some adjustement but look good for our need!
<a href="">
<svg class="stroke-path" height="100%" width="100%">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://cdn.collider.com/wp-content/uploads/super-mario-bros.jpg" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<path id="mlp2" d="M206.5,173.1L33.3,162.5c-6.3,0-11.4-5.1-11.3-11.4c0,0,0,0,0,0L10.5,39.8c0-6.3,5.1-11.4,11.3-11.4 c0,0,0,0,0,0l208.2-17.9c6.3,0,11.4,5.1,11.3,11.4c0,0,0,0,0,0l-23.6,139.8C217.8,168,212.8,173.1,206.5,173.1 C206.5,173.1,206.5,173.1,206.5,173.1z" fill="url(#img1)" fill-opacity="1" />
</svg>
<svg class="" height="100%" width="100%">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />
-->
http://codepen.io/anon/pen/vXBPOz
I'm trying to create a CSS animation for the fill color of a specific part of a SVG image. For that I'm using keyframes and an 'id' to link the animation and the SVG rectangle. You can see a working example here:
http://jsbin.com/deyaqo/3/
This works for most of the browsers except Safari (and maybe IE, I don't know). I'm not sure if this is because of my implementation or due to the lack of support from this vendor.
Thanks for your time !
You could use the animate element instead.
<svg id="logo" x="0" y="0" width="150" viewBox="12.304 3.974 74.952 22.051" enable-background="new 12.304 3.974 74.952 22.051">
<rect id="laukia"
x="56.74"
y="23.094"
width="17.895"
height="2.932"
fill="black" />
<animate xlink:href="#laukia"
attributeType="XML"
attributeName="fill"
from="red" to="rosybrown"
values="red; blue; green; teal; saddlebrown; peru; plum; rosybrown"
repeatCount="indefinite"
dur="5s" />
</svg>
I use Inkscape for creating svg images and want to know how to use not embedded css rules.
For example
draw rectangle
in XML-editor add class attribute as
class="rect1"
to svg:rect object
How to add css like
.rect1 {
fill:#ffef00;
}
Here's an example of an SVG in an HTML page that you can style with CSS:
HTML page
<div id="mySvg">
<svg>
<use xlink:href="images/logo.svg#shape" />
</svg>
</div>
The SVG (located at images/logo.svg)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
</svg>
The CSS
svg {
fill: currentColor;
}
#mySvg {
color: green;
}
See working example: plunker
Notes
If you use Inkscape to create your SVG, you'll probably have to do some hand-editing of the SVG to make it styleable with CSS.
Make sure the SVG code doesn't have any fill attributes in it (fill should be in the CSS). When making an SVG with Inkscape, it often has a fill:none or something. You'll have to manually remove those.
When using Inkscape, save files as "Optimized SVG" as described here.
I want a SVG image (prerendered, but inserted with js in an svg tag, to allow for some further manipulation) to be able to use a predefined pattern, using the "pattern" tag. Sounds simple enough, doesn't it? Well, turns out Chrome (Webkit?) behaves a bit different from any other browsers, and now I'm not sure what the best way would actually be to achieve this.
My svg looks like this:
<svg>
<defs>
<pattern id="specialPattern">...</pattern>
</defs>
<path class="special"></path>
</svg>
and I want paths with the class special to have "pattern" as fill.
Attempt one: Works in Chrome, not in FF or Opera
My first attempt was to simply put this in my css:
.special { fill:url("#specialPattern");}
This actually works in Chrome, though when you think about it, it probably shouldn't. The other browsers I tried interpret this url as relative to the file it's in (the css file), which makes more sense.
Attempt two: Works in FF and Opera, not in Chrome
Next attempt: Provide an absolute url to the pattern.
.special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}
While this works as expected in FF and Opera, Chrome now resets the fill instead (I have no idea where it is actually looking for that style)
Attempt three: Works, kind of
Inlining the style in the SVG works everywhere it seems: style="fill:url('#specialPattern')"
And though I guess this is a case where the lines between content and presentation is blurred, in my case at least it would be much better to keep style decclarations elsewhere (not least because this would make my SVG need to be much bigger)
Attempt four: Works (?) but dirty
I haven't tested a lot of browsers, so I'm not sure about how water proof it is, but it seems to me like using a css hack to detect webkit browsers would work:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.special {fill: url("#specialPattern");}
}
.special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}
Now, there MUST be a more elegant way to solve this. How should it be done?
Edit: Turns out that IE behaves like Chrome here, so you would also need to make sure IE<=9 has 'fill: url(#specialPattern)'
Here's a Fiddle that I did for manipulating patterns and masks. It's a ratings display in svg xml, in which I wanted to be able to use a percentage for the rating bar.
Fiddle: http://jsfiddle.net/cnLHE/296/
By changing the last line to "width="50", and pressing Run, you can see the rating bar resizes.
<svg width="100%" height="100%" viewBox="0 0 100 20" version="1.1">
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="5" style="fill:white" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="9" style="fill:white" />
<circle cx="10" cy="10" r="7" style="fill:black" />
</pattern>
<mask id="mask1" x="0" y="0" width="100" height="20" >
<rect x="0" y="0" width="100" height="20"
style="stroke:none; fill: url(#pattern2)"/>
</mask>
<mask id="mask5" x="0" y="0" width="100" height="20" >
<rect x="0" y="0" width="100" height="20"
style="stroke:none; fill: url(#pattern1)"/>
</mask>
</defs>1<rect x="0" y="0" width="500" height="20" fill="url(#pattern2)" style="fill:#2498c7; mask: url(#mask1)"/>
<rect x="0" y="0" width="50" height="20" style="fill:#2498c7; mask: url(#mask5)"/>
</svg>
I didn't have any cross browser issues, BUT, I did have issues with the SVG disappearing intermittently in grid layouts. In webkit with multiple instances in page, they weren't always showing.
Further info available at css-tricks: http://css-tricks.com/using-svg/
I would like to use <use> on my document but I have problem with cascading classes.
I have the following svg:
<svg>
<defs>
<rect id="pattern" class="color-pattern" x="25" y="25" width="50" height="50"/>
</defs>
<g class="color-object">
<use xlink:href="#pattern"/>
</g>
</svg>
with the following css :
.color-pattern {fill:red;}
.color-object .color-pattern {fill:blue;}
JsFiddle
With firefox the rectangle is blue (I seem it's right), with IE10 or Chrome, the rectangle is red.
Is it a issue ? How I can proceed for having a right result on three browsers ?
Thanks for your answers and sorry for my english.