We Keep Coding

Click only through holes in svg mask: case with intersecting holes

I have svg mask which determines holes in rectangular. Behind svg mask I have some clickable elements and I would like to pass events to them, but only through holes.
I've already asked this question here and got an answer, which worked perfectly for me until I've run into a case with intersecting rectangulars
Click only through holes in svg mask
Is there any simple solution to got area around rectangulars clipped out but not area in intersections? It would be perfect to have something like globalCompositeOperation='destination-out' and I've started to think of how to use canvas instead of svg for my problem, but pointer-events which I use for svg are not yet designed to work correct with canvas as far as I know.
button, svg {
position:absolute;
width:400px;
height:400px
}
button {
background: #0000ff;
cursor: pointer;
}
button:hover {
background: #008800;
}
svg {
pointer-events: none;
}
.over {
fill: #000;
clip-path: url(#clip);
pointer-events: painted;
}
<button></button>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip" clip-rule="evenodd">
<path d="M 20 20 h 360 v 360 h -360 z
M 90 100 v 240 h 140 v -240 z
M 200 290 v 80 h 80 v -80 z" />
</clipPath>
</defs>
<rect y="0" x="0" height="400" width="400" class="over" />
</svg>

In my view, this is a problem of convenience. You would like to be able to use separate paths and treat them the same way whether they interact or not. Unfortunately, because of some limitations in the system, I do not think it is possible to achieve this convenience. However, your quetion itself is easy to answer.
First, a word about what is going on in your example. Your clipPath has a large "outer" path that is drawn clockwise (right, down, left, up). Then you have two "inner" paths drawn counterclockwise (down, right, up, left). The clip works according to what is considered inside and outside the path. The problem is that the intersection is considered outside (see link).
The straightforward solution is to use a single path for every shape, even if it is not a simple rectangle:
button, svg {
position:absolute;
width:400px;
height:400px
}
button {
background: #0000ff;
cursor: pointer;
}
button:hover {
background: #008800;
}
svg {
pointer-events: none;
}
.over {
fill: #000;
clip-path: url(#clip);
pointer-events: painted;
}
<button></button>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip" clip-rule="evenodd">
<path d="M 20 20 h 360 v 360 h -360 z
M 90 100 v 240 h 110 v 30 h 80 v -80 h -50 v -190 z" />
</clipPath>
</defs>
<rect y="0" x="0" height="400" width="400" class="over" />
</svg>

Alignment of textPath in SVG for a pie graph

I am trying to make a pie chart using SVG. The chart comes out fine but I am not able to add a text(values in pie) to it. Tried using textpath but the aligment is an issue. I do not want to use a library because my use case has several of these simple pie on a single screen.
Please find the svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g transform="rotate(-90 50 50)"><path d="M 50,50 l 49,0 a49,49 0 0,0 -18.010176595826515,-37.95564312955508 z" fill="#c3fcb4" id="textPath0"></path><path d="M 50,50 l 30.989823404173485,-37.95564312955508 a49,49 0 1,0 18.010176595826515,37.95564312955509 z" fill="#ffb7b3" id="textPath1"></path></g><text><textPath href="#textPath0">11</textPath></text><text><textPath href="#textPath1">67</textPath></text></svg>

I have improved your code and make it a little bit easier so that you can add more percentage ratio to Svg pie chart
svg {
width: 200px;
border-radius: 50%;
background: #c3fcb4;
transform: rotate(-90deg);
}
svg text {
transform: rotate(90deg);
font-size:5px;
}
circle {
fill: none;
stroke-width: 32;
r: 16;
cx: 16;
cy: 16;
}
circle.first {
stroke: #ffb7b3;
}
le.second {
stroke: #ffeb3b;
}
circle.third {
stroke: purple;
}
<svg viewBox="0 0 32 32">
<circle class='second' stroke-dasharray="36 100"></circle>
<circle class='first' stroke-dasharray="86 100"></circle>
<text x="10" y="-24" fill="#000">11</text>
<text x="5" y="-11" fill="#000">67</text>
</svg>

Generate Large Upward Pointing Triangle From Existing Code Using SVG

I am using the following code from Tympanus to generate a big downward pointing triangle. What I am trying to do is use the same technique to generate a big upward pointing triangle, basic the inverse. Does any one know how to tweak this code to accomplish that?
Your help is greatly appreciated.
Best Regards...
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>

You can easily do that understanding the line commands in an SVG path.
What we have here:
<path d="M0 0 L50 100 L100 0 Z"></path>
Says:
Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.
So, to invert the triangle, you just need:
<path d="M0 100 L50 0 L100 100 Z"></path>
Which basicaly says:
Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.
Check the demo:
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>

You could just draw it upside down using a transform.
translate moves it down (as it's now going to be drawn from the bottom to the top rather than top to bottom.
scale inverts it in the y direction
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>

Make a div that go somewhat curved

This question have been asked a billion times I think, but just another case.
How to make this with HTML / CSS (and, if no other option, JS - I'm thinking of canvas or SVG) :
Notes : the div should be able to contain a scrolling background image on the whole green part. And this should work on IE9+ and common mobile devices (default browser). Also, the space around the shape needs to stay transparent (no white element to create the rounded shape can be used)
What's the better option ?

CSS Implementation
You can create a border shape within a container and hide the unwanted parts. I have used view port sized units to be scalable. It can be further improved to your requirement by manipulating with the values.
body {
background: #F5F5F5;
}
.container {
height: 70vh;
overflow: hidden;
display: inline-block;
width: 30vh;
background: white;
margin: 0 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.curve {
background: transparent;
border: 20vh solid #7cc576;
border-radius: 35%;
height: 100vh;
transform: translateY(-20vh);
width: 50vh;
}
.container-left-curved {
transform: rotateY(180deg);
}
.container-right-curved {
transform: rotateY(0deg);
}
<div class="container container-left-curved">
<div class="curve">
</div>
</div>
<div class="container container-right-curved">
<div class="curve">
</div>
</div>
SVG Implementation
I saved your image and generated the optimized SVG code through Inkscape editor. This looks a lot better than a pure CSS solution.
body {
background: lightgray;
}
<svg height="300px" width="200px" version="1.1" viewBox="0 0 492 746.00001" fill="#000">
<g id="layer1" transform="translate(-119.71 -187.93)">
<path id="path3349" d="m189.71 620.93c0-206.67-0.33548-311-1-311-0.55 0-1-2.25-1-5s-0.45-5-1-5-1-1.9984-1-4.441c0-2.4425-0.45-4.7191-1-5.059-0.55-0.33992-1-1.9415-1-3.559s-0.45-2.941-1-2.941-1-1.0984-1-2.441c0-1.3425-0.45-2.7191-1-3.059-0.55-0.33992-1-1.9415-1-3.559s-0.45-2.941-1-2.941-1-0.88631-1-1.9696-0.9-3.572-2-5.5304c-1.1-1.9585-2-4.2222-2-5.0304 0-0.80827-0.45-1.4696-1-1.4696s-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.59015-1-1.3114c0-0.72129-0.9-2.2775-2-3.4582s-2-2.7323-2-3.448-0.9-1.8633-2-2.5503c-1.1-0.68696-2-2.0459-2-3.0198 0-0.97393-0.9-2.4195-2-3.2123-1.1-0.79284-2.0021-1.9047-2.0046-2.4708-0.002-0.56608-1.3525-2.4673-3-4.225-1.6474-1.7577-3-3.5577-3.0056-4-0.006-0.44232-2.2557-3.1613-5-6.0422-2.7444-2.8809-4.9897-5.6545-4.9897-6.1636 0-0.50907-2.534-3.4395-5.6312-6.512l-5.6312-5.5864h207.31 207.31l11.311 11.25c6.2212 6.1875 11.317 11.7 11.325 12.25 0.007 0.55 1.788 2.8 3.9571 5s3.9659 4.7875 3.9929 5.75 0.52562 1.75 1.1081 1.75c0.58246 0 0.73793 0.51953 0.34549 1.1545-0.39555 0.64-0.27852 0.88566 0.2626 0.55123 0.98336-0.60775 4.3329 2.601 4.3329 4.1507 0 0.45847 0.9 1.6481 2 2.6436 1.1 0.99549 2 2.6402 2 3.655s0.45 1.845 1 1.845 1 0.59015 1 1.3114c0 0.72129 0.9 2.2775 2 3.4582s2 2.8406 2 3.6886c0 0.84799 0.45 1.5418 1 1.5418s1 0.9 1 2 0.45 2 1 2 1 0.9 1 2 0.45 2 1 2 1 0.9 1 2 0.47656 2 1.059 2c0.58246 0 0.81241 0.39901 0.51101 0.88669-0.30141 0.48768 0.12204 1.4428 0.94098 2.1224 0.81894 0.67966 1.489 2.0806 1.489 3.1133s0.45 1.8776 1 1.8776 1 1.35 1 3 0.45 3 1 3 1 1.1516 1 2.559c0 1.4514 0.43284 2.2915 1 1.941 0.58342-0.36057 1 0.65628 1 2.441 0 1.6825 0.45 3.059 1 3.059s1 1.8 1 4 0.45 4 1 4 1 1.8 1 4 0.45 4 1 4 1 2.25 1 5 0.45 5 1 5c0.66452 0 1 104 1 310v310h-210-210v-311z"
fill="#7ac474" />
</g>
</svg>

Finally, after looking for the good way to achieve that, here's my notes:
1. RaphaelJS
I think RaphaelJS makes it easy and offers extended compatibility (I tested on IE8 and IE7, it works, even if I don't need it) and easier manipulation.
Here's a live example : http://jsfiddle.net/bkfssykp/
As you can see, this is somewhat a SVG based solution :
paper.path("M0,0h259.478c0,0,42.939,36.419,42.939,88.694 c0,132.905,0,368.306,0,368.306H42.939c0,0,0-235.587,0-368.464C42.939,36.345,0,0,0,0z");
I just pasted the code of my svg shape directly into it. Now, I can play with it : animation, modification, etc.
2. SVG clip-path
My first attempt was an SVG image with a SVG clip-path, as said in the article mentionned by #Deepak : https://css-tricks.com/clipping-masking-css/
Here's a live example : http://jsfiddle.net/xptycnkg/3/
Still SVG : this looks like CSS clip-path, but applied on SVG element. Works on IE9.

How to set transforms to svg path based on div width and height?

I'm using the svg paths in my project and i need to resize the paths using transform based on the svg container div's height and width. I tried using viewbox but it also set transform to label text. I have googled a lot but i didn't found anything.
Here is my SVG
<div id="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="#f0f0f0" stroke="#c8c8c8" transform="matrix(1.2,0,0,1.2,10,10)" d="M38.52,55.26L38.980000000000004,53.94L39.160000000000004,54.39L39.81,54.69L40.85,53.949999999999996L41.28,54.54L41.980000000000004,54.51L42.150000000000006,53.739999999999995L41.230000000000004,52.17999999999999L42.02,51.43999999999999L41.93,50.07999999999999L42.42,49.68999999999999L42.32,48.65999999999999L43.13,48.389999999999986L43.18,48.889999999999986L43.66,49.29999999999998L44.61,48.98999999999998L44.519999999999996,48.30999999999998L43.169999999999995,46.65999999999998L42.269999999999996,46.80999999999998L40.38999999999999,46.24999999999998L40.559999999999995,44.26999999999998L41.21999999999999,44.79999999999998L41.739999999999995,44.72999999999998L42.029999999999994,44.16999999999998L41.87,43.49999999999998L45.169999999999995,42.979999999999976L45.42999999999999,42.28999999999998L43.72999999999999,41.32999999999998L42.86999999999999,41.189999999999976L42.49999999999999,39.67999999999998L41.79999999999999,39.25999999999998L40.98999999999999,39.239999999999974L41.30999999999999,34.50999999999998L40.819999999999986,33.229999999999976L40.91999999999999,32.53999999999998L40.51999999999999,32.199999999999974L41.27999999999999,26.459999999999972L41.149999999999984,23.99999999999997L40.69999999999998,23.37999999999997L40.539999999999985,22.01999999999997L39.889999999999986,20.68999999999997L39.15999999999999,20.11999999999997L38.83999999999999,17.66999999999997L39.18999999999999,15.39999999999997L39.03999999999999,14.28999999999997L40.779999999999994,10.98999999999997L40.25999999999999,9.75999999999997L44.849999999999994,13.65999999999997L46.03999999999999,14.03999999999997L46.959999999999994,14.78999999999997L47.769999999999996,16.08999999999997L49.629999999999995,17.169999999999973L52.87,18.079999999999973L53.71,18.849999999999973L55.13,18.959999999999972L56.86,19.979999999999972L59.19,20.709999999999972L60.65,20.239999999999974L61.17,20.529999999999973L61.72,21.219999999999974L61.69,22.309999999999974L62.239999999999995,23.049999999999972L62.55,23.15999999999997L63.04,22.80999999999997L63.11,22.05999999999997L63.56,22.08999999999997L64.19,23.479999999999972L63.79,24.05999999999997L64.13,24.54999999999997L64.69,24.50999999999997L65.41,23.66999999999997L65.03,21.96999999999997L66.06,21.729999999999972L65.62,21.959999999999972L65.41000000000001,22.649999999999974L66.68,27.059999999999974L66.22000000000001,27.159999999999975L64.55000000000001,28.889999999999976L64.77000000000001,27.599999999999977L64.55000000000001,27.189999999999976L63.24000000000001,27.499999999999975L62.86000000000001,28.309999999999974L62.95000000000001,29.259999999999973L61.58000000000001,30.959999999999972L59.600000000000016,32.339999999999975L58.54000000000001,33.74999999999997L57.58000000000001,34.43999999999997L56.48000000000001,36.10999999999997L56.42000000000001,36.81999999999997L57.040000000000006,37.41999999999997L58.00000000000001,37.53999999999997L60.77000000000001,37.059999999999974L61.99000000000001,36.479999999999976L61.96000000000001,35.77999999999997L61.32000000000001,35.549999999999976L58.38000000000001,36.339999999999975L58.03000000000001,36.03999999999998L61.260000000000005,32.619999999999976L64.32000000000001,31.739999999999977L65.21000000000001,30.229999999999976L66.94000000000001,28.689999999999976L67.47000000000001,29.259999999999977L68.01000000000002,29.069999999999975L68.23000000000002,27.259999999999977L68.17000000000002,29.509999999999977L68.43000000000002,30.419999999999977L67.44000000000003,30.209999999999976L66.80000000000003,30.979999999999976L66.39000000000003,30.249999999999975L65.87000000000003,30.059999999999974L65.48000000000003,30.699999999999974L65.78000000000003,31.409999999999975L65.80000000000003,33.03999999999998L65.59000000000003,31.969999999999978L64.92000000000003,31.759999999999977L64.45000000000003,32.449999999999974L64.38000000000004,33.199999999999974L64.84000000000003,33.85999999999997L64.21000000000004,34.43999999999997L64.21000000000004,34.88999999999997L64.63000000000004,35.059999999999974L66.31000000000004,34.489999999999974L66.56000000000004,35.57999999999998L65.48000000000005,37.369999999999976L65.40000000000005,38.41999999999997L64.57000000000005,39.119999999999976L64.70000000000005,40.119999999999976L63.850000000000044,39.439999999999976L64.97000000000004,37.99999999999998L64.74000000000004,37.03999999999998L62.78000000000004,38.119999999999976L62.400000000000034,38.75999999999998L62.35000000000004,36.64999999999998L61.830000000000034,36.66999999999998L60.80000000000003,38.259999999999984L59.540000000000035,38.789999999999985L58.400000000000034,40.65999999999998L56.890000000000036,40.95999999999998L56.430000000000035,41.38999999999998L56.220000000000034,42.56999999999998L57.330000000000034,42.53999999999998L57.080000000000034,42.89999999999998L57.35000000000004,43.269999999999975L58.28000000000004,43.28999999999998L58.34000000000004,43.96999999999998L58.87000000000004,44.439999999999976L59.39000000000004,44.16999999999997L59.740000000000045,42.409999999999975L59.880000000000045,42.82999999999998L60.71000000000004,42.67999999999998L61.82000000000004,44.159999999999975L63.130000000000045,43.549999999999976L64.78000000000004,42.06999999999998L65.76000000000005,40.50999999999998L66.39000000000004,41.28999999999998L67.12000000000005,41.42999999999998L67.56000000000004,41.19999999999998L67.50000000000004,40.33999999999998L69.06000000000004,39.789999999999985L69.41000000000004,38.84999999999999L69.08000000000004,37.579999999999984L69.30000000000004,36.389999999999986L69.12000000000003,35.02999999999999L69.95000000000003,35.22999999999999L70.25000000000003,34.30999999999999L70.06000000000003,33.55999999999999L69.34000000000003,32.929999999999986L70.23000000000003,31.799999999999986L70.30000000000003,30.049999999999986L71.54000000000002,28.809999999999988L72.15000000000002,27.439999999999987L73.76000000000002,26.94999999999999L74.54000000000002,25.78999999999999L74.09000000000002,25.12999999999999L73.58000000000001,25.10999999999999L72.72000000000001,23.809999999999988L72.88000000000001,21.719999999999988L72.62,20.849999999999987L73.11,20.059999999999988L73.17,19.219999999999988L72.02,17.489999999999988L71.39,17.08999999999999L71.22,16.44999999999999L71.4,15.949999999999989L71.99000000000001,16.17999999999999L72.52000000000001,15.849999999999989L72.76,14.049999999999988L73.55000000000001,13.809999999999988L73.85000000000001,12.809999999999988L73.24000000000001,10.489999999999988L73.68,9.959999999999988L73.65,9.099999999999989L72.69000000000001,8.219999999999988L71.74000000000001,8.519999999999989L70.65,5.859999999999989L71.58000000000001,4.029999999999989L112.89000000000001,13.429999999999989L151.85000000000002,21.07999999999999L142.19000000000003,75.47L141.72000000000003,76.49L142.76000000000002,79.49L142.89000000000001,81.49L141.89000000000001,82.78999999999999L142.62,84.66999999999999L111.44,78.74999999999999L109.77,79.53999999999999L102.53,78.52L100.85,79.44L96.66,79.32L93.47999999999999,79.77L91.83999999999999,80.52L90.96,80.25999999999999L89.75999999999999,80.55999999999999L88.24999999999999,80.32999999999998L85.81999999999998,79.38999999999999L84.90999999999998,79.84999999999998L81.45999999999998,80.35999999999999L79.34999999999998,79.64999999999999L77.69999999999997,79.94999999999999L77.38999999999997,78.58999999999999L76.29999999999997,77.71L71.95999999999997,76.25L69.63999999999997,76.14L68.48999999999997,75.63L67.21999999999997,75.83999999999999L65.32999999999997,76.69999999999999L60.82999999999997,77.27999999999999L59.71999999999997,76.57L58.56999999999997,76.27L56.95999999999997,75.11999999999999L55.11999999999997,74.60999999999999L54.48999999999997,73.79999999999998L55.12999999999997,66.97999999999999L54.65999999999997,66.02999999999999L54.43999999999997,64.12999999999998L53.45999999999997,62.77999999999998L51.49999999999997,61.10999999999998L48.67999999999997,60.99999999999998L47.64999999999997,59.689999999999976L47.49999999999997,58.63999999999998L46.93999999999997,58.00999999999998L44.57999999999997,57.699999999999974L44.01999999999997,57.39999999999998L43.779999999999966,56.60999999999998L43.279999999999966,56.42999999999998L42.30999999999997,56.77999999999998L41.46999999999996,56.51999999999998L40.36999999999996,56.91999999999998L39.39999999999996,55.44999999999998L38.50999999999996,55.22999999999998ZM61.85,39.78L62.01,40.52L61.589999999999996,41.010000000000005L61.589999999999996,40.10000000000001L61.849999999999994,39.790000000000006ZM71.27,20.38L70.66,21.25L70.50999999999999,21.77L70.61999999999999,20.759999999999998L71.27,20.38ZM71.14,15.62L71.05,15.569999999999999L71.1,15.53L71.14,15.629999999999999ZM70.37,15.48L69.60000000000001,15.870000000000001L69.97000000000001,15.190000000000001L69.90000000000002,14.590000000000002L70.12000000000002,14.520000000000001L70.37000000000002,15.490000000000002ZM57.56,42.45L57.61,42.43L57.6,42.44L57.56,42.46ZM67.75,19.23L69.48,17.13L69.95,17.11L70.48,18.82L70.13000000000001,18.27L69.62,18.15L69.07000000000001,18.59L68.72000000000001,18.5L68.37000000000002,19.23L67.74000000000002,19.22ZM67.87,20.4L68.31,20.4L68.92,20.9L69,21.25L68.21,21.05L67.88,20.400000000000002ZM68.84,23.16L68.74000000000001,23.67L68.74000000000001,23.67L68.72000000000001,23.430000000000003L68.84000000000002,23.150000000000002ZM69.15,25.42L69.23,25.46L69.35000000000001,25.42L69.19000000000001,25.53L69.14000000000001,25.43ZM69.52,25.33L70,24.4L71.02,25.61L71.13,26.73L70.78999999999999,27.09L70.44999999999999,27L70.17999999999999,25.45L69.50999999999999,25.33ZM66.34,9.97L66.82000000000001,9.63L67.00000000000001,11.14L66.78000000000002,11.09L66.34000000000002,9.969999999999999ZM68.04,9.66L68.87,10.46L68.22,10.770000000000001L68.03999999999999,9.660000000000002ZM66.69,38.03L67.03,36.96L67.24,36.71L67.21,37.78L66.69,38.04ZM66.99,33.31L67.08999999999999,32.27L67.43999999999998,31.930000000000003L67.20999999999998,33.49L66.98999999999998,33.31ZM66.51,14.27L66.10000000000001,13.87L66.7,13.12L66.52,13.729999999999999L66.50999999999999,14.28ZM66.68,14.62L67.08000000000001,14.819999999999999L67.00000000000001,14.939999999999998L66.71000000000001,14.819999999999999L66.68,14.62ZM66.74,12.96L66.72999999999999,12.860000000000001L66.77999999999999,12.740000000000002L66.73999999999998,12.970000000000002ZM64.36,13.12L63.3,12.299999999999999L63.489999999999995,10.489999999999998L64.82,12.409999999999998L64.47,12.589999999999998L64.36,13.129999999999999ZM62.18,42.55L62.41,42.3L62.43,42.309999999999995L62.3,42.62L62.18,42.55ZM60.04,40.3L59.949999999999996,40.11L59.989999999999995,40.04L59.989999999999995,40.17L60.03999999999999,40.31Z" stroke-width="1" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1;"></path>
<text x="120" y="60" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#000000" font-size="12px" font-style="normal" font-weight="normal" font-family="Arial" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial; opacity: 1;">
<tspan dy="4.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">WA</tspan>
</text>
</svg>
Here is my DEMO.
In the above demo clicking maximize button will increase the div size, path size also should change correspondingly, how to do this?
Any suggestions will be appreciated.
Thanks,
KarthiK.

I have made a little DEMO. It is not perfect but works, you will need to use some more math and calculations to get it to work with your path.
var paper = Raphael("container");
var p1 = paper.path('M 190 162 L 331 124.2 L 281.9 48.5Z M 190 162 L 197.6 16.2 L 110.5 39.6Z M 190 162 L 53.7 109.7 L 49 199.8Z M 190 162 L 98.1 275.5 L 182.4 307.8Z M 190 162 L 269.5 284.4 L 326.3 214.3Z');
p1.attr({'stroke':'blue',fill:'orange'});
$("#min").click(function ()
{
rel = ($("#container").width()-100)/$("#container").width();
$("#container").width(($("#container").width()-100)+"px");
$("#container").height(($("#container").height()-100)+"px");
paper.setSize($("#container").width(),$("#container").height());
p1.scale(rel);
p1.translate( (-1*p1.getBBox().x) ,(-1*p1.getBBox().y));
});
$("#max").click(function ()
{
rel = ($("#container").width()+100)/$("#container").width();
$("#container").width(($("#container").width()+100)+"px");
$("#container").height(($("#container").height()+100)+"px");
paper.setSize($("#container").width(),$("#container").height());
p1.scale(rel);
p1.translate( (-1*p1.getBBox().x) ,(-1*p1.getBBox().y));
});
Hope it helped ;)

If you set an appropriate viewBox for your svg, the browser will do the correct scaling for you. For example, in this case:
viewBox="0 0 200 200"
http://jsfiddle.net/UeXRw/
Update: sorry I missed the bit about not wanting the label to scale.
How about this modified approach then:
http://jsfiddle.net/UeXRw/1/
It assumes you know beforehand what the sizes are going to be. If you don't know that then it just needs a little bit of maths. Something like:
$("#label").css("font-size", (12*minWidth/maxWidth)+"px");