I am trying to make a rectangule in svg move down and them,when you tap it,to go to the right but it seems that it doesn't work.The console doesn't show any error.
Here is a JSFiddle:https://jsfiddle.net/troosfx8/
Update:Thanks for the answers.But now I want to know how can I make the second animation begin if a variable is 5 for example.Is there any way I can make a svg animation begin based on a condition?
There is a much simpler solution than how you are attempting to do it above.
All you need to do is add another <animate> element that begins on a click.
<svg width="360" height="400"
style="border:#9999ff dotted 7px; border-radius:12px;" >
<rect id="Rect" x="70" y="70" width="50" height="50"
style="stroke:yellow; stroke-width:5px; fill:orange;">
<animate id="pos" attributeName="y" from="70" to="140" dur="1s"
repeatCount="none" fill="freeze"/>
<animate id="pos" attributeName="x" from="70" to="140" dur="1s"
repeatCount="none" fill="freeze" begin="click"/>
</rect>
</svg>
Related
Here is pen
I want to apply drop shadow effect on rect, when rect is hidden using one of the following technique:
opacity:0 // or
fill:rgba(1,1,1,0) // or
fill-opacity:0 // or
display:none
when I trying to apply filter on such elements, shadow not appearing at all...
Is it possible to apply drop shadow on hidden Svg paths? How?
The simplest way is by using a mask.
In the demo below we have added a drop shadow to a circle. Then we construct the mask so that it hides the circle itself, but keeps the area outside the circle (ie the shadow). Revealing the red rectangle behind it.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
<mask id="invisible">
<rect width="100%" height="100%" fill="white"/>
<circle cx="50%" cy="50%" r="80" fill="black"/>
</mask>
</defs>
<rect x="40" y="60" width="150" height="80" fill="red"/>
<circle cx="50%" cy="50%" r="80"
style="fill:blue; filter:url(#shadow); mask: url(#invisible);"/>
</svg>
If you're just looking for a drop shadow with no rect, setting the fill to the background color will work:
.square{
fill:#fff;
width:100px;
height:100px;
filter:url('#drop-shadow');
}
If you've got multiple elements under the rect, you could try hiding just the filled in area with a clip-path or mask.
Good afternoon everyone,
I'm defining an SVG on my page with the following defs.
<svg width="0" height="0">
<defs>
<g id="stroke-hexagon">
<polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>
</g>
<g id="hexagon">
<polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
</g>
</defs>
</svg>
...and implementing it later in the HTML using this:
<svg width="208px" height="180px" viewBox="0 0 208 180" >
<use xlink:href="#hexagon"></use>
<text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle"></text>
<text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text>
</svg>
Works totally fine. I am also able to style the polygon's fill with simple CSS. Looks like this:
#hexagon:hover polygon {
fill:#990000;
}
The hover effect fails, however, whenever the mouse leaves the polygon and instead hovers over either of the 'text' elements within the svg. Is there a way to define a CSS rule that prevents this behavior. Or, would it be better (easier) to change the attribute using JS / jQuery?
Thanks!
Your texts are rendered on top of your polygon and are therefore intercepting mouse events. You should set up a css rule like
text {
pointer-events: none;
}
This will prevent the text from becoming a target of mouse events which should give you the desired hover effect for the polygon.
As shown in this fiddle it's possible to render a CSS sprite in SVG using the foreignObject element.
However this isn't supported in IE, so I was wondering if there was another way to do it.
I suspect the answer may be no, because I found two unresolved questions on this (1,2)
I'm using d3.js so any answer that spells out the d3 way to do this would be a bonus.
You could pick out parts of an image using a clipPath if necessary. Extend your jsfiddle like this to see what I mean...
<div class='source youtube'></div>
<svg width="100%" height="100%">
<foreignObject height=50 width=50>
<div class='source facebook'></div>
</foreignObject>
<defs>
<clipPath id="c">
<rect y="10" width="7" height="10"/>
</clipPath>
<clipPath id="c2">
<rect x="7" y="12" width="7" height="10"/>
</clipPath>
</defs>
<image transform="scale(4.5)" y="-5" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c)"/>
<g transform="translate(-30, 0)">
<image transform="scale(4.5)" x="0" y="0" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c2)"/>
</g>
<svg>
I have some SVG elements grouped together in a <g> element. I just want to style that <g> element to show grouping of elements. Like I want to give some background-color and a border to it. How it would be achieved?
I tried fill and stroke attribute to <g> element, but it doesn't work. How it would be possible?
Sample Here
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g fill="blue" stroke="2">
<rect id="svg_6" height="112" width="84" y="105" x="136" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#00ff00"/>
<ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="271" cy="156" id="svg_7" rx="64" ry="56"/>
</g>
</svg>
You cannot add style to an SVG <g> element. Its only purpose is to group children. That means, too, that style attributes you give to it are given down to its children, so a fill="green" on the <g> means an automatic fill="green" on its child <rect> (as long as it has no own fill specification).
Your only option is to add a new <rect> to the SVG and place it accordingly to match the <g> children's dimensions.
You actually cannot draw Container Elements
But you can use a "foreignObject" with a "SVG" inside it to simulate what you need.
http://jsfiddle.net/VBmbP/4/
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<foreignObject id="G" width="300" height="200">
<svg>
<rect fill="blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000"/>
<ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56"/>
</svg>
<style>
#G {
background: #cff; border: 1px dashed black;
}
#G:hover {
background: #acc; border: 1px solid black;
}
</style>
</foreignObject>
</svg>
I know its long after this question was asked and answered - and I am sure that the accepted solution is right, but the purist in me would rather not add an extra element to the SVG when I can achieve the same or similar with straight CSS.
Whilst it is true that you cannot style the g container element in most ways - you can definitely add an outline to it and style that - even changing it on hover of the g - as shown in the snippet.
It not as good in one regard as the other way - you can put the outline box around the grouped elements - but not a background behind it. Sot its not perfect and won't solve the issue for everyone - but I would rather have the outline done with css than have to add extra elements to the code just to provide styling hooks.
And this method definitely allows you to show grouping of related objects in your SVG's.
Just a thought.
g {
outline: solid 3px blue;
outline-offset: 5px;
}
g:hover {
outline-color: red
}
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000"/>
<ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56"/>
</g>
</svg>
The style that you give the "g" element will apply the child elements, not the "g" element itself.
Add a rectangle element and position around the group you wish to style.
See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
EDIT: updated wording and added fiddle in comments.
Imagine this situation:
<svg height="0px">
<defs>
<g id="img">
<circle id="cir1" cx="10" cy="10" r="5"/>
<circle id="cir2" cx="30" cy="10" r="5" />
<rect id="rect1" x="50" y="5" width="20" height="10" />
</g>
</defs>
</svg>
<div id="div1">
<div id="div2" style="width:100px; height: 50px; border: 1px solid black">
hey
</div>
</div>
<svg height="20px"><use id="img1" xlink:href="#img"/></svg>
<svg height="20px"><use id="img2" xlink:href="#img"/></svg>
<svg height="20px"><use id="img3" xlink:href="#img"/></svg>
<svg height="20px">
<circle id="cir5" cx="10" cy="10" r="5"/>
</svg>
It's possible to change the color ONLY of the first circle of the image with id=img1 using jQuery/javascript?
Something like
$("#img1 #cir1").css("fill","red");
I tried but it doesn't work.
If can be helpful here's the fiddle: http://jsfiddle.net/MaxMarkson/q6Wep/
That's not possible. Think of the <use> as being paint the referenced item here. If you alter the referenced item then all the <use> instances will change.
The authors of the SVG specification have noticed that people often want to do this sort of thing and there is a SVG parameterisation proposal which may become part of SVG 2. The examples in the parameterisation proposal are created using javascript so you could do it that way right now if you copy the mechanism there.