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
Related
Trying to figure out how to centre this SVG text horizontally and vertically in the viewport
(The element needs to remains central across different viewport sizes)
Tried using the viewbox panning but I can't get everything aligned - part of the SVG remains cut off/incorrectly scaled
Also looking to set the font size to the same rem value as other standard text elements on the page.
SVG text is used as there's a 'slice' GSAP animation happening to it.
<div class="stage">
<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="2000" height="800" viewBox="0 0 1000 800">
<defs>
<pattern id="slicePattern" patternUnits="userSpaceOnUse" width="3000" height="800" x="0" y="0"><text transform="translate(500 400)" text-anchor="middle" font-size="220" fill="#fff">SLICE</text>
</pattern>
</defs>
<g fill="url(#slicePattern)">
<polygon id="slide1" points="0,150 551,150 201,400 0,400" />
<polygon id="slide2" points="549,150 1000,400 999,400 1000,150" />
<polygon points="200,400 550,150 1000,400" />
</g>
<line x1="550" y1="150" x2="200" y2="400" stroke-width="1" stroke="white"/>
<line x1="550" y1="150" x2="1000" y2="400" stroke-width="1" stroke="white"/>
</svg>
</div>
The standard text to match to is 2.5em. Setting the SVG text to that it doesn't size the same. Also can't correctly pan the viewbox to centre the svg text in the viewport. I need this to be responsive centering also.
In short, I don't understand the effect the text transform properties are having on the element, or how this relates to the viewport/viewbox values.
For making the whole svg responsive:
svg{
width:100%;
height:auto
}
For the text, It has already text-anchor set to middle which is correct. You need to specify the position of the text by setting x and y values.
<text text-anchor="middle" x="50" y="0">The Text</text>
The font-size in svg has nothing to do with the default font-size of the css. It's relative to the viewBox of your svg. SVG functions as a separate image file. But you can have access to its style attributes by css.
I want to colorize a transparent part of a svg icon from font awesome. I am using Vue Fort-Awesome package.
Here as you see inner part of icon is getting the background image of my main div. However I don't want those part to be transparent. Do you have any tricky solution for it? I know this question can be very easy but I couldn't find how to search for it on google.
<v-icon
icon="minus-circle"
class="w-6 h-6 rounded-full text-red-500"
/>
Those are technologies that I use but simple css trick can be acceptable too.
Tailwind
Vue3
FortAwesome
You can change the color of the minus or circle by changing the hex value in the fill section.
For other icons, you can change color by editing the svg file.
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="#00970F"/>
<rect x="39" y="88" width="123" height="25" rx="10" fill="#FA00FF"/>
</svg>
As far as I understand (by reading previously posted questions on stackoverflow) that cropping an image using svg coorindates is possible, but it is possible to crop an image by using an svg link? for example: <img src="http://imgh.us/face01.svg">
EDIT: This is what I meant:
Thanks!
Yes. You can do it using the mask-image property. This is supported on all browsers except IE.
.masked {
-webkit-mask-image: url(http://imgh.us/face01.svg);
mask-image: url(http://imgh.us/face01.svg);
}
<img src="http://lorempixel.com/400/400" width="400" height="400" class="masked">
Unfortunately you will still need to make other arrangements for IE.
You can do it all inside SVG using the image element combined with a SVG mask or a SVG filter and have it work on IE10+ (and all other browsers). Here is the filter example:
<svg width="400px" height="400px">
<defs>
<filter id="crop-me" x="0%" y="0%">
<feImage xlink:href="http://imgh.us/face01.svg" result="area"/>
<feComposite operator="in" in="SourceGraphic" in2="area"/>
</filter>
</defs>
<image filter="url(#crop-me)" xlink:href="http://lorempixel.com/400/400" x="0" y="0" width="200" height="300"/>
</svg>
I have a svg image element. I have to set margin for image.
<svg id="chart" preserveAspectRatio="xMidYMid" viewBox="0 0 960 500">
<image class="leaf" x="240.9471668231492" y="362.4164063706163" width="80" height="80" href="http://upload.wikimedia.org/wikipedia/commons/a/ac/ML_maple_leaf.png"></image>
<svg>
My css is:-
.leaf
{
margin-top:80px;
}
Why my css is not working. Is there any othere way to set css in svg.
AFAIK, the SVG standard doesn't specify anything like margin, which is why it's handled inconsistently. Just set the correct x and y of your image and the correct size of your svg
This is a little hard to explain, so here's a jsFiddle to show what I mean.
<style>
.clip {
clip-path: url(#clippath);
-o-clip-path: url(#clippath);
-moz-clip-path: url(#clippath);
-webkit-clip-path: url(#clippath);
}
</style>
<div id="container">
<svg>
<defs>
<clippath id="clippath">
<rect x="0" y="0" width="50" height="320" />
</clippath>
</defs>
</svg>
<div id="d1">Bottom</div>
<div id="d2" class="clip">Middle</div>
<div id="d3">Top</div>
</div>
The problem is that I want to apply a clip-path to an absolutely positioned element, however I am finding that all other absolutely positioned elements which appear after it in the DOM will be clipped too. This isn't the case with relatively positioned elements, oddly.
How can I make sure that only the desired element is clipped? I can't see anything wrong with my code. Is this a bug?
This now behaves correctly in all browsers I've tested aside from Internet Explorer (which lacks support for clippath on HTML elements entirely), and as such it's no longer a problem.