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.
Related
Couldn't find it anywhere else to I might ask here :
I have svg rectangle which inside has other rectangles.
What I want to achieve is to center each of these rectangles in the centre of it's parent and in relation to each other.
If I drag rectangle 1 down I want the other one to move up to keep both of them centered - and same thing happening if I drag the other element down (should push upper one up).
Problem here is that I might have different width/heights and there would be 2 or more elements. Is there any mathematical equationfor that? Or a name that I can look for?
I would put the 3 rects inside a group and use the group as in the following example
svg{
border:1px solid;
width: 30vh;
}
<svg viewBox="0 0 100 280">
<defs>
<g id="rects">
<rect width="80" height="80" />
<rect width="60" height="25" x="10" y="10" />
<rect width="60" height="25" x="10" y="45" />
</g>
</defs>
<use xlink:href="#rects" x="10" y="10" stroke="black" fill="none" />
<use xlink:href="#rects" x="10" y="100" stroke="black" fill="none" />
<use xlink:href="#rects" x="10" y="190" stroke="black" fill="none" />
</svg>
I am working on svg rectangles which represent a farmer's field. Is it possible to have an image of a field on it, just to give it a true sense and view.
Here's a sample code of one of the rectangles
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:green; stroke: black; stroke-width:3;" />
</svg>
</body>
</html>
I used clipPath to cut and place the picture in a rectangle.
<svg width="600" height="200" viewBox="0 0 600 200" >
<defs>
<clipPath id="field">
<rect x="25" y="5" width="550" height="190" rx="25" ry="25" style="fill:none; stroke: black; stroke-width:1;" />
</clipPath>
</defs>
<image xlink:href=" https://i.stack.imgur.com/MJkK0.jpg" width="600" height="200" clip-path="url(#field)" />
</svg>
If you want to use a different border form instead of a rectangle, for example a circle, then this will be easy to do, replacing the rectangle with a circle in the clipPath.
Option, as suggested by Paulie_D, but it needs a little refinement
If you need a frame around the picture, you will need to add a second transparent rectangle with a border
<rect width="300" height="100" style="fill:none; stroke: black; stroke-width:3;" />
<svg width="400" height="110">
<defs>
<pattern id="field" patternUnits="userSpaceOnUse" width="300" height="100">
<image xlink:href=" https://i.stack.imgur.com/MJkK0.jpg" x="-20" y="0" width="350" height="130" />
</pattern>
</defs>
<rect width="300" height="100" fill="url(#field)" />
<rect width="300" height="100" style="fill:none; stroke: black; stroke-width:3;" />
</svg>
UPDATE
With a black frame looks grim, let's replace it with a shadow.
To create a shadow, the Gauss filter is used, blurring the edges of the bottom rectangle
<filter id="filtershadow" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
</filter>
<body>
<svg width="400" height="110">
<defs>
<filter id="filtershadow" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
</filter>
<pattern id="field" patternUnits="userSpaceOnUse" width="300" height="100">
<image xlink:href=" https://i.stack.imgur.com/MJkK0.jpg" x="0" y="0" width="350" height="130" />
</pattern>
</defs>
<rect class="rect-shadow" x="10" y="14" width="290" height="90" filter="url(#filtershadow)" style="fill:black; " />
<rect width="300" height="100" fill="url(#field)" />
</svg>
</body>
I code a web app, in this have some images tag and I set it display to none. Like example code . My issue is when I run on some device image cannot load. When i set image show only blank display.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<g id="gimg">
<image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>
</g>
<rect id="myrect" x="100" y="100" width="20" height="20"></rect>
</svg>
<script>
$("#myrect").on("click",function(){
$("#img").show();
});
</script>
If the problem is in phones try this:
$("#myrect").on("click",function(){
$("#img").show();
return false;
});
Can you add style=display: none to your image element
<image id="img" style="display:none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>.
This should load the image
Have you tried this way?
<svg>
<defs>
<symbol id="my-icon" viewBox="0 0 30 30">
<rect id="myrect" x="25" y="25" width="20" height="20" />
</defs>
</symbol>
<image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px" />
</svg>
$("#myrect").on("click", function() {
$("#img").show();
});
Just change the viewBox, etc to your requirements.
I hope this helps.
I'm trying to think of the best way to include an image inside an SVG polygon element, like the below:
<svg id="graph" width="100%" height="400px">
<!-- pattern -->
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 64 64">
<image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image>
</pattern>
</defs>
<polygon stroke="red" stroke-width="2px" fill="url(#image)" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
</svg>
However, i also want to fill the polygon with a background colour fill, but as this is using the above pattern i'm not sure of the right approach.
Move your polygon into your defs, but take the fill out. Then make two copies with the use tag, the back one filled with your color and the front one filled with your image. You can also make multiple copies by including more images, changing the coordinates, etc.
<svg id="graph" width="100%" height="400px">
<!-- pattern -->
<defs>
<pattern id="image1" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64">
<image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image>
</pattern>
<pattern id="image2" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64">
<image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/iPhoto.png"></image>
</pattern>
<polygon id="myShape" stroke="red" stroke-width="2px" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
</defs>
<use xlink:href="#myShape" fill="yellow"/>
<use xlink:href="#myShape" fill="url(#image1)"/>
<use xlink:href="#myShape" fill="orange" x="400"/>
<use xlink:href="#myShape" fill="url(#image2)" x="400"/>
</svg>
Is it possible to shade in a corner of a shape using only gradients?
Below is an image of what I am trying to do, but had to use a circle and a path.
I know using a path is probably a better method, but I am curious if it can be accomplished with gradients.
Thank you.
Path is not the only method. Sometimes a 5 year old can outsmart me with basic shapes:-
<svg class="sheet" xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
<pattern id="my_pattern" patternUnits="userSpaceOnUse"
width="200" height="200" viewbox="0 0 200 200">
<rect x="0" y="0" fill="#33ff33" width="200" height="200" />
<rect x="50" y="0" fill="red" width="50" height="50" />
</pattern>
<circle cx="50" cy="50" r="40" style="stroke:black; stroke-width: 2;
fill: URL(#my_pattern)"/>
</svg>
Not with a single gradient. No.