Related
I currently have a working example, but I'm wondering if there's someone out there with more knowledge on SVGs than myself who can compress the code and make it more elegant.
What I'm trying to do:
Show image inside the custom defined path (shape) once page is loaded ("lazy load")
Until page load (on slower devices most importantly) show a fill as background.
See the fiddle and code here:
https://jsfiddle.net/k2o9L6dg/
Replicate the issue
All is working fine as you can see, but I would like to remove the <g> tag. If I remove this tag, the shape is transparent/white until the image loads. You can throttle under the "Network" tab to see this user experience. I would like to use a grey fill until image loads, so text can be displayed within the shape.
I feel like it should be possible to make this work, without having to define the "path" two times. Whenever I change the fill on the mask path to other than white, nothing appears at all (no idea why this happens).
I would like to be able to compress the code to just this:
<div class="vector">
<svg xmlns="http://www.w3.org/2000/svg" image-rendering="optimizeQuality" viewBox="0 0 510 360" shape-rendering="geometricPrecision" fill-rule="evenodd">
<defs>
<mask id="bg-c" maskContentUnits="objectBoundingBox">
<path fill="white" transform="scale(0.001965, 0.002800)" d="M148.500 3.099 C 113.488 6.747,84.700 13.892,62.351 24.482 C 43.108 33.600,33.681 41.189,22.444 56.609 C 7.759 76.760,4.338 86.781,5.282 106.890 C 5.880 119.655,7.968 128.762,13.637 143.340 C 23.834 169.561,23.443 167.883,23.464 185.500 C 23.479 197.898,23.041 203.414,21.520 210.000 C 18.603 222.635,18.745 240.097,21.847 249.975 C 30.657 278.033,52.991 299.700,93.500 319.490 C 109.905 327.505,121.171 331.756,142.440 337.958 C 190.118 351.861,258.762 358.886,289.318 352.989 C 307.253 349.528,331.710 340.925,364.262 326.626 C 392.030 314.428,408.965 308.298,425.480 304.468 C 451.051 298.538,471.322 283.403,481.509 262.633 C 487.363 250.696,489.054 243.962,489.701 230.000 C 490.547 211.754,486.958 197.061,477.358 179.483 C 469.662 165.389,471.689 154.395,491.588 102.309 C 506.590 63.041,509.743 48.582,505.331 39.285 C 501.149 30.471,482.609 22.301,459.167 18.940 C 445.334 16.957,405.463 18.286,371.500 21.862 C 319.125 27.376,299.077 27.919,277.500 24.407 C 270.080 23.199,265.779 21.647,253.000 15.566 C 234.292 6.663,230.109 5.365,214.006 3.470 C 200.434 1.873,162.341 1.658,148.500 3.099">
</path>
</mask>
</defs>
<image loading="lazy" data-href="https://images.pexels.com/photos/910411/pexels-photo-910411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="100%" height="100%" mask="url(#bg-c)" preserveAspectRatio="xMidYMid slice">
</image>
</svg>
</div>
You can avoid duplicate <path> elements by creating a reusable definition in <defs>.
<defs>
<path id="maskPath" d="..." />
</defs>
Note: your reusable path definition must not contain any fill property if you need to change it's fill for different instances (like mask and background shape)
Your mask would look something like this:
<mask id="bg-c" >
<use href="#maskPath" fill="white" />
</mask>
Example
//emulate loading by setTimeout delay
emulateLazyLoad();
function emulateLazyLoad() {
let lazyImages = document.querySelectorAll('[loading="lazy"]');
lazyImages.forEach(function(lazy) {
let imgHref = lazy.dataset.href;
setTimeout(function() {
if (lazy.nodeName.toLowerCase() == "image") {
lazy.setAttribute("href", imgHref);
} else {
lazy.src = imgHref;
}
lazy.classList.replace("loading", "loaded");
}, 1000);
});
}
svg {
width: 50%;
display: inline-block;
}
.image {
transition: 0.3s opacity;
}
.loading {
opacity: 0;
}
.loaded {
opacity: 1;
}
<div class="vector">
<svg xmlns="http://www.w3.org/2000/svg" image-rendering="optimizeQuality" viewBox="0 0 510 360" shape-rendering="geometricPrecision" fill-rule="evenodd">
<defs>
<path id="maskPath" d="M148.500 3.099 C113.488 6.747,84.700 13.892,62.351 24.482 C 43.108 33.600,33.681 41.189,22.444 56.609 C 7.759 76.760,4.338 86.781,5.282 106.890 C 5.880 119.655,7.968 128.762,13.637 143.340 C 23.834 169.561,23.443 167.883,23.464 185.500 C23.479 197.898,23.041 203.414,21.520 210.000 C 18.603 222.635,18.745 240.097,21.847 249.975 C 30.657 278.033,52.991 299.700,93.500 319.490 C109.905 327.505,121.171 331.756,142.440 337.958 C 190.118 351.861,258.762 358.886,289.318 352.989 C 307.253 349.528,331.710 340.925,364.262 326.626 C392.030 314.428,408.965 308.298,425.480 304.468 C 451.051 298.538,471.322 283.403,481.509 262.633 C 487.363 250.696,489.054 243.962,489.701 230.000 C490.547 211.754,486.958 197.061,477.358 179.483 C 469.662 165.389,471.689 154.395,491.588 102.309 C 506.590 63.041,509.743 48.582,505.331 39.285 C501.149 30.471,482.609 22.301,459.167 18.940 C 445.334 16.957,405.463 18.286,371.500 21.862 C 319.125 27.376,299.077 27.919,277.500 24.407 C 270.080 23.199,265.779 21.647,253.000 15.566 C 234.292 6.663,230.109 5.365,214.006 3.470 C 200.434 1.873,162.341 1.658,148.500 3.099" />
<mask id="bg-c">
<use href="#maskPath" fill="white" />
</mask>
</defs>
<use id="bgShape" href="#maskPath" fill="gray" />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Loading ...</text>
<image class="image loading" loading="lazy" data-href="https://images.pexels.com/photos/910411/pexels-photo-910411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="100%" height="100%" mask="url(#bg-c)" preserveAspectRatio="xMidYMid slice" />
</svg>
</div>
Place another <use>instance of your blob shape to create a background element like so:
<use id="bgShape" href="#maskPath" fill="gray" />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Loading ...</text>
<image class="image loading" loading="lazy" data-href="https://images.pexels.com/photos/910411/pexels-photo-910411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="100%" height="100%" mask="url(#bg-c)" preserveAspectRatio="xMidYMid slice" />
I'm struggling to make an animation work. I've created two SVG shapes in Illustrator with the same amount of path points. Now i want to code a morphing animation. My first try was an animate object as suggested here:
<span class="svgspan">
<svg class="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 398 369.4"
style="enable-background:new 0 0 398 369.4;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
}
</style>
<path id="pfad" class="st0" d="M398 184.7c0 51-20.7 97.2-54.1 130.6s-79.6 54.1-130.6 54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M398,184.7c0,51-20.7,97.2-54.1,130.6s-79.6,54.1-130.6,54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z" to="M195 369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8 131.7-6.1 85 17.2 50C57.9-16 157.7-15.8 199.1 49.4
c32.3-51.6 107.8-65.7 155.7-27.5c54.5 39.2 53.8 119.8 15.8 170.4c-49 65.4-124.1 107-167.6 177.1H195z"></path>
</svg></span>
I got an animation, but it didn't morph but instantly switch to the second path.
My next approach was a css animation like this:
#pfad {
d: path('M195,369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8,131.7-6.1,85,17.2,50C57.9-16,157.7-15.8,199.1,49.4c32.3-51.6,107.8-65.7,155.7-27.5c54.5,39.2,53.8,119.8,15.8,170.4c-49,65.4-124.1,107-167.6,177.1H195z');
transition: 1s;
}
This didn't work either. I even got an 'Unknown property: d' error in VS Code and Chrome:
It would be nice if someone could help me get this working.
Edit: The anchor points are in the right position now i guess, but i still have the same problem. New anchor points:
<path id="pfad" class="st0" d="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z" to="M199,369.4C150.6,291.4,54.8,251,12.9,169C-3.6,131.6-5.9,84.9,17.4,49.9c40.7-66,140.5-65.8,181.9-0.6
C231.6-2.3,307.1-16.4,355,21.8c54.5,39.2,53.8,119.8,15.8,170.4C321.8,257.6,242.5,299.3,199,369.4L199,369.4z"></path>```
Like the comments suggest, it is a good idea to be precise with the point in the path. So, your code is ok. It is just the path that need a helping hand.
I copied your path to Inkscape and make the two shapes there.
path {
fill: red;
}
<span class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200">
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
<animate id="trs" begin="1s" fill="freeze" attributename="d" dur="2s"
from ="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z"
to="M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z" />
</path>
</svg>
</span>
The main condition for the implementation of smooth animation path changes
using the attribute d are:
Equal number of nodes in both shapes
Exact match of the node type (A; C; Q), respectively, for each point in the initial and final position of the path
These conditions can be met in different ways, but it is better to do this in the vector editor.
You must have the same number of node points by the heart and the circle
Below is a screenshot from Inkscape. Drag matching points from the outline of the heart to the outline of the circle
#chrwahl did this work in his answer while solving this problem
All credits to #chrwahl for a job well done
#jayjay9601 comments
I'll definitely try that even though i would prefer the html/css-only
version
Below is the complete CSS animation code using the d attribute:
.svgspan {
width:30vw;
height:30vh;
}
#pfad{
fill: crimson;
transition: all 1s ease-in-out;
}
#pfad:hover {
d: path("M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z");
fill: red;
}
<div class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" >
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
</path>
</svg>
</div>
I'm trying to change the color of this SVG icon with CSS:
<symbol id="meetings">
<svg viewBox="9 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)">
<polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"></polygon>
<g id="Group-4" transform="translate(0.000000, 5.907692)">
<path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"></path>
</g>
</g>
</svg>
I'm using that SVG in the HTML like this:
<svg class="active" width="32px" height="32px">
<use xlink:href="#meetings"/></use>
</svg>
Here is the CSS (using SASS):
.foot__icon svg.active {
fill: #ffffff !important;
path, g, #Group-4 {
fill: #ffffff !important;
}
}
This isn't working and I can't figure out why. When I try to remove the fill declaration from the g tag (fill="#03A9F4") then the SVG disappears completely.
The active class is even showing up in dev tools but the color is not showing up white
Update: This seems to be an issue with the <use> tag. If I put the class directly on the SVG, then it works as expected. Still not sure what's going on here.
When you reference something via a <use>, the referenced elements don't suddenly become part of the DOM "under" the <use> element. In other words, the DOM still remains like this
<symbol id="meetings">
<path>
<svg class="active">
<use>
Not
<svg class="active">
<use>
<symbol id="meetings">
<path>
So a CSS rule like svg.active path won't work.
Symbols are meant to be static copies of an element, or set of elements that are reused. If you want to style them, you should style the original symbol. For instance:
#Group-4 {
fill: #ffffff;
}
If you want to dynamically style the symbol then there is one limited solution you can use. There is a special keyword value for SVG colors named currentColor, which allows you to use the current value of color for the fill or stroke.
This "trick" allows us to pass a single colour into the symbol. In the example below I am using it to colour the path in the symbol.
#Group-4 {
fill: currentColor;
}
svg.active {
color: red;
}
svg.inactive {
color: lightgrey;
}
<svg width="0" height="0">
<symbol id="meetings" viewBox="9 0 33 32">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)">
<polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"></polygon>
<g id="Group-4" transform="translate(0.000000, 5.907692)">
<path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"></path>
</g>
</g>
</symbol>
</svg>
<svg class="active" width="32px" height="32px">
<use xlink:href="#meetings"/>
</svg>
<svg class="inactive" width="32px" height="32px">
<use xlink:href="#meetings"/>
</svg>
So we are setting the symbol's path to fill: currentColor, and then setting color to red for svg.active. The red gets passed into the symbol and used for the path.
And just to prove it is dynamic, I've added another reference to the symbol, with class "inactive", and made that one a different colour.
How can I add multiple layers of SVG polygons in the same SVG? For example, I have a drawing of a car (see snippet) over here, what if I want to add a window on it? If I write the new window markup below the car markup (see snippet) it is not visible. If I write it above the car markup is overwritten.
<svg heght="100" width="100">
<!--bil-->
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;">
<!--window-->
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;">
</svg>
In SVG you must terminate elements properly either with /> or a closing tag e.g. </polygon>
The html parser is parsing your current markup as nested polygons which is not allowed.
Your window's not in the right place but at least it's visible now.
<svg heght="100" width="100">
<!--bil-->
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;"/>
<!--window-->
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;"/>
</svg>
All,
Question 1:
I have been experienced difficulties in aligning text to the middle of the polygons in SVG, HTML.
There are a number of polygons. But, I only put 3 up for the easiness.
For each polygon, I have the points value for Xs and Ys.
Hence, It is possible to get an approximately average value of x and y, and use these values in "text" elements.
It is acceptable to align text to the SVG polygons if there are only a small number of them.
So I wonder if there is a SVG property, or any other way to align the text to the polygon automatically?
Such as text-align, or position: centre, which you don't have to calculate the x,y value, it will align to the middle of polygons?
Here is the JSFiddle:
http://jsfiddle.net/matildayipan/umb2fmuc/
HTML:
<svg height="503" width="900" fill="white" stroke="black" stroke-width="2">
<g id="Ashfield">
<polygon points="536,379 535,377 536,374 539,368 541,367 541,363 539,363 540,359 546,362 557,362 559,358 559,359 565,358 568,359 567,363 563,368 564,382 562,386 558,386 554,390 554,392 552,392 551,395 547,397 547,399 545,398 548,392 548,386 546,385 537,386 536,379"/>
<text data-brackets-id="152" x="536" y="380" style="font-size: 12px;"> Ashfield </text>
</g>
<g id="Auburn">
<polygon points="437,360 438,358, 437,345 441,337 441,331 439,329 439,326 441,320 452,318 455,317 457,314 468,312 472,304 483,304 483,306 485,307 488,307 493,302 499,304 493,311 493,315 496,316 497,318 496,321 497,324 501,325 501,334 496,339 490,342 486,340 482,341 480,347 480,349 482,349 479,350 479,353 486,363 484,364 482,371 467,377 451,378 447,373 445,373 443,370 441,370 439,367 436,366 437,360"/>
</g>
<g id="Bankstown">
<polygon points="403,430 405,428 405,425 399,418 399,405 402,405 404,403 404,400 397,394 397,390 393,389 393,383 394,382 399,383 402,372 405,369 406,365 408,364 413,353 421,360 423,360 436,370 438,370 438,372 443,374 451,381 468,380 478,375 480,375 481,380 485,380 486,378 489,377 485,402 489,404 494,404 488,406 486,413 478,422 468,425 467,430 461,431 461,443 462,449 464,450 464,469 467,472 468,476 462,477 456,481 443,483 441,487 438,489 438,491 430,490 430,486 426,486 422,490 420,486 424,483 424,481 417,475 417,473 414,470 406,469 406,464 408,463 407,457 404,455 399,455 395,446 391,445 394,442 393,432 395,432 397,429 399,431 403,430"/>
</g>
</svg>
As you can see, I use x, y to roughly align the text "Ashfield" to the polygon(Ashfield).
Question 2:
As it shows, the border of polygon "Auburn" and "Bankstown" are having a small gap in between. How can I merge them together to make it looks like a single border, just exactly like the map?
What you are looking for is text-anchor="middle".
http://www.w3.org/TR/SVG/text.html#TextAlignmentProperties
It will centre the text horizonatally on the point you specify. However there is no reliable way to center the text vertically, but using dy="0.5em" may be a reasonable approximation for you for a single line of text. You can tweak the dy amount to suit the font you are using and it should work for any font size.
<svg>
<circle cx="150" cy="75" r="5" fill="red"/>
<text x="150" y="75" text-anchor="middle" dy="0.5em"font-size="20">Here is some centred text</text>
</svg>