I am working with svg and its dom manipulation. I want to create a border for a group of svg elements positioned inside the <g> tag. How do I do this? Is it possible to create circular / elliptical boundaries also? I am using the jQuery SVG library. Thanks in advance
<g>
<rect x="20" y="30" width="200" height="300" fill = "red"/>
<circle cx="40" cy="50" r="25" fill="blue"/>
</g>
You cannot add a border to containers like <g> or <svg>, since they are not supposed to render anything directly by themselves. You may want to look how this demo is implemented using the cross browser implementation of getScreenBBox();
In your CSS you could add:
rect {border: 1px solid #00f;}
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.
I'm looking to create something like this using CSS:
As I hover over each colored section, I want to be able to change the color of the section and have a popup appear.
I know that using a canvas with an image map & clickable area coords is one way to tackle this, but I'm wondering if there is perhaps an easier way that would allow me to create the graphic with CSS and set a class for each piece of it.
You should use an SVG. The actual SVG markup can be embedded into your HTML as several grouped elements.
You can then wire up javascript events or target the elements with CSS :hover. Because the browser knows their exact shape, you can get pixel-accurate mouse overs.
circle:hover {
opacity: 0.5;
}
<svg width="500" height="500">
<circle id="circle1" cx="50" cy="50" r="20" fill="red"/>
<circle id="circle2" cx="150" cy="50" r="40" fill="green"/>
<circle id="circle3" cx="200" cy="50" r="30" fill="blue"/>
</svg>
Plenty of vector editing packages like Adobe Illustrator or Sketch can output SVG artwork. There are also online SVG editors.
I have an SVG file that looks like below:
Is there a way to make the text transparent? That is, instead of a fill color I want to cut out the layers and show what's in the background (of the SVG i.e. whatever lies underneath the SVG). In other words, make the intersection of the path & text to be transparent?
Contents of the SVG file:
<svg width="36.087" height="34.314" viewBox="0 0 36.087 34.313999" x="1190.56" y="753.5780000000001">
<path fill="#63a95c" d="M36.087 13.107l-13.305-.66L18.047 0l-4.742 12.446L0 13.106l10.377 8.352L6.89 34.314l11.157-7.285 11.14 7.284-3.475-12.856" fill-rule="evenodd"/>
<text font-size="10px" x="10.498" y="23.484" fill="#ffffff" fill-opacity="1" font-family="OpenSans-Bold">8.5</text>
</svg>
I tried changing the transparency of the text element, but that only affects the text. The text inside the SVG is variable is populated dynamically so I can't "pre-process" the SVG file. Is there a way perhaps using evenodd fill or something similar to create an "exclusion" for intersection? Is it possible using one of the SVG JS libraries such as snap.svg or svg.js?
Edit:
The final SVG should look like this:
The SVG code posted above is for the star and the text. The final SVG should have the background color showing through the text while retaining the outer shape of the star.
Create a mask, put the text in it via a text element and then use the mask on the shape you want to clip a hole in. Something like this...
head, body {
width:100%;
height:100%;
}
<svg width="100%" height="100%" viewBox="0 0 200 200">
<defs>
<mask id="sample" maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="white"/>
<text x="12" y="23" font-size="10" font-family="Impact">9.0</text>
</mask>
</defs>
<path fill="#63a95c" d="M36.087 13.107l-13.305-.66L18.047 0l-4.742 12.446L0 13.106l10.377 8.352L6.89 34.314l11.157-7.285 11.14 7.284-3.475-12.856" fill-rule="evenodd" mask="url(#sample)"/>
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.
I have some pattern in svg that I applied to my rect, the code is like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="position:absolute; top:0px; left:0px">
<defs>
<rect id="unitsqr" fill="#DBDBDB" stroke="white" stroke-width="1px" x="0" y="0" width="12" height="12"/>
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
<use xlink:href="#unitsqr" />
</pattern>
</defs>
<rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/>
</svg>
I want to do some animation in raphael but also keep my grid , I don't get any clue on how to create a pattern in raphael and use it as a fill later. Is there a way to do that anyway?
When you do Element.attr("fill", "http://example.com/example.png") Raphaël creates a <pattern> element for you under-the-hood if the SVG backend is used. But there's no highlevel API support in Raphaël for creating and manipulating pattern fills. So, either you'll need to extend Raphaël or you can do it with plain js assuming you don't care about the VML fallback for IE8 and lower.
The correct syntax would be
Element.attr("fill" , "url(http://exmaple.com/example.png)") ;
You can do funky stuff like filling creating an image shaped like a circle or a path easily by creating an element using Raphael.path or Raphael.circle and setting the fill to a url.