SVG view box crop using jquery - javascript
I am doing sticker website for my client. They need image crop within given SVG image. That SVG image is unshaped like Halloween face (see below).
When i upload an image, it will display within the given image. The rest of the image will hide.
How can i achieve this?
This is really quite easy with SVG clipPaths. It has good browser support as well, except of course IE.
.defs {
position: absolute;
width: 0;
height: 0;
}
.demo {
text-align:center;
}
.star image {
clip-path: url(#star-clip);
}
.hex image {
clip-path: url(#hex-clip);
}
.heart image {
clip-path: url(#heart-clip);
}
.shape image {
clip-path: url(#shape-clip);
}
<svg class="defs">
<defs>
<clipPath id="star-clip">
<polygon id="star" points="150,7.3 196.4,101.3 300,116.3 225,189.4 242.7,292.7 150,243.9 57.3,292.7 75,189.4 0,116.3 103.6,101.3" />
</clipPath>
<clipPath id="hex-clip">
<polygon id="hex" points="222.5,295 77.5,295 5,150 77.5,5 222.5,5 295,150" />
</clipPath>
<clipPath id="heart-clip">
<path id="heart" d="M248.078,5.883c-36.691-14.739-77.771-0.839-98.517,31.125C128.817,5.044,87.735-8.856,51.043,5.883 C9.354,22.632-10.863,70.009,5.887,111.696c16.06,39.98,143.314,139.607,143.314,139.607l0.359,0.28l0.36-0.28 c0,0,127.251-99.627,143.314-139.607C309.986,70.009,289.768,22.632,248.078,5.883z"/>
</clipPath>
<clipPath id="shape-clip">
<path id="shape" d="M132.9,0.9c-12.5,1-34.7,4.4-44.9,6.7c-33.5,7.6-55.7,28.2-63.8,58.8c-1.8,6.9-2.2,9.7-2.3,20.1c0,10.5,0.2,13.3,2.3,21.6 c9.5,40.7,33.2,90.2,71.5,149.8c10.5,16.4,14.8,21.8,22.8,29.3c4.3,3.9,8.3,6.8,13,9.2l6.9,3.4h10.9c10.9,0,10.9,0,17-2.9 c7.6-3.7,14.3-8.7,21.4-16.2c6.9-7.2,10.5-12.3,21.9-30.3C248,188.7,272,134.3,277.4,96.6c1.2-8.6,0.5-22.4-1.7-31.3 c-5.6-23.4-20.8-41.2-43.6-50.9c-15.3-6.5-27.5-10-44.5-12.5C177.7,0.5,144.9-0.1,132.9,0.9z"/>
</clipPath>
</defs>
</svg>
<div class="demo heart">
<svg width="300" height="300">
<image xlink:href="http://lorempixel.com/output/city-q-c-300-300-4.jpg" width="300" height="300" />
</svg>
</div>
<div class="demo star">
<svg width="300" height="300">
<image xlink:href="http://lorempixel.com/output/cats-q-c-300-300-10.jpg" width="300" height="300" />
</svg>
</div>
<div class="demo hex">
<svg width="300" height="300">
<image xlink:href="http://lorempixel.com/output/people-q-c-300-300-8.jpg" width="300" height="300" />
</svg>
</div>
<div class="demo shape">
<svg width="300" height="300">
<image xlink:href="http://lorempixel.com/output/nightlife-q-c-300-300-6.jpg" width="300" height="300" />
</svg>
</div>
You'll need to define your clipPath and then apply it to your image. In the demo, I created a separate SVG element that contains all of the shapes as path or polygon definitions and simply applied them using external styles. You can of course do this in a single SVG, such as:
<svg width="120" height="120">
<defs>
<clipPath id="shape-clip">
<path id="shape" d="M60,117.4c-20.4,0-44.8-53.6-49-76.4C7.3,21,26.6,4.2,46.9,2.6c7-0.5,19.8-0.2,26.2,0 C93.5,3.4,112.7,21,109,41C104.8,63.8,79.3,117.4,60,117.4z"/>
</clipPath>
</defs>
<image xlink:href="http://lorempixel.com/output/nightlife-q-c-120-120-6.jpg" width="120" height="120" style="clip-path: url(#shape-clip);" />
</svg>
Some things to keep in mind:
Your defs need to be defined in the source order before they are used (so you can't put them at the end of your page for example).
The SVG element defs will not display, but they will take up space in the rendered page. I just force them out of the document flow with position: absolute and give them a height and width of 0 to make sure they don't mess with my layout.
For more information, you might want to look at these:
Clipping and Masking in CSS, CSS Tricks
SVG Clip Path Tutorial, Jenkov.com
Clipping, Masking and Compositing Specification, W3C
Related
Svg icons disappear when I resize window
I have an SVG icon like this:
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<rect width="19" height="19" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlinkHref="#image0" transform="scale(0.00444444)"/>
</pattern>
<image id="image0" width="225" height="225" xlinkHref="data:image/jpeg;base64,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"/>
</defs>
</svg>
It displays on screen width > 1279 but disappears from the screen width <= 1279. Because of the page's layout, I have three divs that render on different screen sizes and contain this svg. I tried using svgs with different ids but the same content. However, it didn't work for me. Can somebody help me with that?
logic code:
component that uses svg icons (all of them disappear on width <= 1279 except star svgs that rendered in a list)
<div className="position__reviews--social-wrapper">
<div className="position__reviews--social">
<Icon className="position__reviews--social-icon" name="google" />
<Icon className="position__reviews--social-icon" name="vivino" />
</div>
<div className="position__reviews--vivino-wrapper">
<Icon className="position__reviews--vivino-text-icon" name="vivino-text" />
{[...Array(5)].map((star,idx) => idx + 1 <= redStars ? <Icon className="position__reviews--star-red" name="position__review-star-red" /> : <Icon className="position__reviews--star-gray" name="position__review-star-gray" />)}
</div>
</div>
Icon (svgIcons is a list of jsx items: () => (<svg>...</svg>) ):
const Icon = ({ name, fill, onClick, className }) => {
const svg = svgIcons[name];
const iconClasses = cn(className, {
'icon--active': !!onClick,
});
return svg ? (
<span className={iconClasses} onClick={onClick}>
{svg(fill)}
</span>
) : null;
};
css:
.position__reviews--social-icon {
border: 1px solid #C4C4C4;
box-sizing: border-box;
border-radius: 3px;
margin-right: 6px;
padding: 4px;
padding-top: 9px;
padding-bottom: 1px;
cursor: pointer;
}
What happens:
width > 1279:
width <= 1279:
This: <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"> <rect width="19" height="19" fill="url(#pattern0)"/> <defs> <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlinkHref="#image0" transform="scale(0.00444444)"/> </pattern> <image id="image0" width="225" height="225" xlinkHref="data:image/jpeg;base64,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"/> </defs> </svg> was most likely created by a developer in a K-Hole "Falling into a k-hole" is slang for how it feels when you take a high enough dose of ketamine that your awareness of the world around you and your control over your own body become so profoundly impaired that you're temporarily unable to interact with others—or the world around you. It wraps a Base64 data (the Google G logo) in an <image> in a <pattern> in a <rect> in a <svg> I would ask that developer what the meaning is, because all you have to do is: wrap the Base64 data in an IMG element <img width="19" src="data:image/jpeg;base64,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"> If you do want the contrived SVG, write proper SVG: <svg width="19" height="19" viewBox="0 0 19 19"> <rect width="19" height="19" fill="url(#pattern0)"/> <defs> <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> <use href="#image0" transform="scale(0.00444444)"/> </pattern> <image id="image0" width="225" height="225" href="data:image/jpeg;base64,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"/> </defs> </svg>
Making inline SVG responsive in browsers without using javascript?
I've been reviewing articles like this one which are really good, but possibly dated, and I'm wondering if any progress has been made on a simple way to make inline svg responsive while maintaining the aspect ratio? In other words if we have svg with a 1:1 aspect ratio inside a div container, and the container shrinks from 400x400px to 200x200 px, then the view box width and height parameters double.
I am confused about what you want. I don't know what you mean, in your question, when you talk about "view box width and height parameters double". Perhaps you are confused about how viewBox works.
As long as the SVG has a viewBox it should be responsive.
In the following example, I've put the SVG in a div container and animated the container size to simulate the page size changing.
#container {
width: 200px;
background: linen;
animation: scale 1s alternate infinite;
}
#keyframes scale {
from { width: 200px; }
to { width: 100px; }
}
<div id="container">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="gold"/>
<rect x="10" y="50" width="20" height="50" fill="gold"/>
<rect x="70" y="50" width="20" height="50" fill="gold"/>
<circle cx="35" cy="45" r="5"/>
<circle cx="65" cy="45" r="5"/>
</svg>
</div>
But it could just as easily be a container that is the width of the page. Try running the following snippet. Then click "Fullpage" and resize the browser window.:
#container {
width: 100%;
background: linen;
}
<div id="container">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="gold"/>
<rect x="10" y="50" width="20" height="50" fill="gold"/>
<rect x="70" y="50" width="20" height="50" fill="gold"/>
<circle cx="35" cy="45" r="5"/>
<circle cx="65" cy="45" r="5"/>
</svg>
</div>
If you don't need to change svg with css or modify it, I suggest you to use it as an img element. You create an img and put the path to your svg in the src. Here's what I mean: https://codepen.io/tlemaitre/pen/PBKGOo
I've recently had a similar problem, I have a container that needs to be preserveAspectRatio="none" to keep the shape fluid on different window sizes but the image inside gets gets distorted. I've not seen any solution to this problem with or without JS, so I don't think it's possible.
ScrollMagic, reverse z-index order
I'm using scrollmagic to tween svg clippaths as you scroll. Usually with svgs(or divs or sections or whatever) the last thing you specify in your html is on top in terms of z-index, but you change that in css. I tried to do this with my svgs, so that while the first svg tweens, the other one scrolls up behind it. It seems like scrollmagic is preventing my z-indexing from working though. Any ideas?
http://codepen.io/kathryncrawford/pen/BoXOMJ
<div id="scene">
<svg id="svg1" height="500" width="800">
<image id="img1" xlink:href="http://placecage.com/800/500" x="0" y="0" width="800" height="500"/>
<defs>
<clipPath id="clip1">
<circle id="circle1" stroke="#000000" stroke-miterlimit="10" cx="400" cy="300" r="300" />
</clipPath>
</defs>
</svg>
</div>
<div id="scene2">
<svg id="svg2" height="500" width="800">
<image id="img2" xlink:href="http://fillmurray.com/800/500" x="0" y="0" width="800" height="500"/>
<defs>
<clipPath id="clip2">
<circle id="circle2" stroke="#000000" stroke-miterlimit="10" cx="400" cy="300" r="300" />
</clipPath>
</defs>
</svg>
</div>
CSS
#img1 {
clip-path: url(#clip1);
}
#img2 {
clip-path: url(#clip2);
}
#svg1, #circle1{
z-index: 2;
}
#svg2, #circle2{
z-index: 1;
}
Crap, I literally just figured it out after posting this. I changed the z-index css declaration to the z-index on the scene divs that wrap the svgs. That worked.
http://codepen.io/kathryncrawford/pen/BoXOMJ
#scene{
z-index: 2;
}
#scene2{
z-index: 1;
}
Change opacity of an area based on mouse position
Is it possible to change the opacity of background but only underneath the cursor area (for example a white small circle)? I am thinking of it a bit like a basic heatmap but the heat doesn't stay - it just follows the cursor.
At the moment I have the following
HTML:
html {
background-color: #000;
width: 100%;
height: 100%;
}
JS:
$(document).mousemove(function(event){
var i = event.pageX.toPrecision(1) / 1000;
$("html").css('opacity', i)
});
Sorry this is probably a very basic starting point. Would I need to use canvas?
You can do that using svg
What i did :-
I placed two same images with same co ordinates,height and width and gave a circular clip-path to the one on top (which has full opacity) when mouse moves the position of the circle also changes
$('svg').on('mousemove',function(e){
$('.a').attr('cx',e.pageX).attr('cy',e.pageY)
})
.one{
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
<clippath id="clip" >
<circle cx="50" cy="50" r="50" class="a"/>
</clippath>
<image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/>
<image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/>
</svg>
Can't change SVG rect properties in three containers
After several tries, and code changes, I am unable to make rectangle inside SVG to change his position - don't even ask for animating. Obviously using jQuery SVG plugin plus animation extension.
The problem: A SVGs wrapped inside three <div>, an inside y have a rectangle that need to be at y:0 after the document loads. And this is the code:
var rect = jQuery('div.post-image').children('svg').svg().svg('get');
jQuery(rect).each(function(){
jQuery(this).change('.b1', {y:0});
});
Well, nothing happens with the rectangle, it keeps the original coordinate. Chrome console doesn't says anything either.
Added: the HTML in question
<a href="#" class="post-image" title="title">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="140" viewBox="0,0,250,140" overflow="hidden">
<switch>
<g>
<defs>
<filter id="innershadow">
<feOffset dx="0" dy="0"></feOffset>
<feGaussianBlur stdDeviation="7" result="offset-blur"></feGaussianBlur>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
<feFlood flood-color="#000" flood-opacity="0.3" result="color"></feFlood>
<feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
<feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite>
</filter>
<pattern xmlns="http://www.w3.org/2000/svg" id="image-771" patternUnits="userSpaceOnUse" width="250" height="202">
<image href="example-310x250.jpg" xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="250" height="202"></image>
</pattern>
<clipPath id="clip">
<polygon points="0,0 235,0 250,70 235,140 0,140 15,70"></polygon>
</clipPath>
</defs>
<polygon points="0,0 235,0 250,70 235,140 0,140 15,70" style="fill: url(#image-771); filter:url(#innershadow);"></polygon>
<rect class="b1" width="100%" height="100%" style="fill:rgb(0,92,148); opacity: 0.9;" clip-path="url(#clip)" x="0" y="98"></rect>
<rect class="b2" width="60" height="25" style="fill:rgb(0,92,148); opacity: 0.9;" clip-path="url(#clip)" x="190" y="0"></rect>
<rect class="b3" width="100" height="25" style="fill:rgb(0,0,0); opacity: 0.75;" clip-path="url(#clip)" x="0" y="0"></rect>
</g>
<foreignObject width="250" height="140">
<img width="250" height="125" src="example-fallback.jpg" alt="example" title="title"> </foreignObject>
</switch>
</svg>
</a>
I'm willing to use <canvas> for this, but I don't know what are the outcomes.
Found out what wast the problem:
var rect = jQuery('a.post-image').children('svg').find('.b2, .b3');
jQuery(rect).each(function(){
jQuery(this).attr('y','-25');
});
Done, and without a plugin. Okey, not the best way (find instead of most direct selector), but it will cut it.