SVG multiple shapes containing <g> I want get the particular g tage image width and height using svg editor(https://github.com/SVG-Edit/svgedit) .
Example Image:
<g id="svg_1" class="svg_16 deg_90 cat_top stag" transform="translate(168,27)">
<path id="path3482" stroke="null" d="M163.4569320678711,77.09903907775879 L163.53585815429688,57.430060029029846 L169.3652572631836,57.448439955711365 C172.57144165039062,57.45854997634888 176.23014068603516,57.605380058288574 177.49568939208984,57.77471995353699 C180.63410186767578,58.194659948349 239.44471740722656,73.29018974304199 239.9712677001953,73.8109302520752 C240.62197875976562,74.4544506072998 240.55477905273438,79.61404991149902 239.8870391845703,80.27433967590332 C239.3158416748047,80.83922958374023 181.77594757080078,95.68032836914062 178.26336669921875,96.16965103149414 C177.0821533203125,96.33391952514648 173.2498779296875,96.53572082519531 169.74712371826172,96.61808013916016 L163.3785629272461,96.76786041259766 L163.45748901367188,77.09888076782227 L163.4569091796875,77.09903907775879 L163.4569320678711,77.09903907775879 z" fill="#e8e8e8">
</g>
<g id="svg_2" class="svg_14 deg_180 cat_top stag" stroke-opacity="1">
<path id="path3408" stroke="null" fill="#d5d5d5" d="M333.94000244140625,178.6445770263672 C333.83778381347656,178.53108978271484 333.75416564941406,169.477783203125 333.75416564941406,158.52658081054688 L333.75416564941406,138.61399841308594 L373.75416564941406,138.61399841308594 L413.75416564941406,138.61399841308594 L413.75416564941406,158.73200225830078 L413.75416564941406,178.8499984741211 L373.94017028808594,178.8499984741211 C352.04217529296875,178.8499984741211 334.04217529296875,178.75717163085938 333.94017028808594,178.64366149902344 L333.940002441....50531768798828 L334.86944580078125,143.56642150878906 L373.89344787597656,143.56642150878906 L412.9174499511719,143.56642150878906 L412.9174499511719,141.70929718017578 L412.91815185546875,141.7094268798828 zM340.6531524658203,139.00318908691406 C339.46495056152344,138.9451675415039 337.520751953125,138.9451675415039 336.3325500488281,139.00318908691406 S336.11651611328125,139.10868072509766 338.4928436279297,139.10868072509766 S341.84124755859375,139.06121063232422 340.6531524658203,139.00318908691406 z">
</g>
<svg>
I want svg_1 width height.
var bbox = $("#svg_1").getBBox();
your bbox object looks like this:
SVGRect {x: 119, y: 138, width: 358, height: 308}
Related
I'm referencing an svg file's content from my html, like this:
<svg id='container' width="19" height="19">
<use href="../svg.svg#path"/>
</svg>
svg.svg
<svg
id="home"
width="19"
height="19"
viewBox="0 0 19 19"
xmlns="http://www.w3.org/2000/svg">
<path id='path' fill-rule="evenodd" clip-rule="evenodd" d="M6.10156 2.31433C4.85892 2.31433
3.85156 3.32169 3.85156 4.56433V7.27979L5.21733 6.15722C5.88058 5.61207 6.84134 5.62857 7.48549
6.19616L11.5046 9.7376C11.8811 10.0694 12.0971 10.547 12.0976 11.0489L12.1032 16.8638H14.6256C15.8682
16.8638 16.8756 15.8565 16.8756 14.6138V4.56433C16.8756 3.32169 15.8682 2.31433 14.6256 2.31433H6.10156ZM2.35156
4.56433V8.51269L0.879033 9.72301C0.474603 10.0554 0.240234 10.5514 0.240234 11.0749L0.240249
16.6071C0.240252 17.5731 1.02297 18.3564 1.98897 18.3571L12.1047 18.3645L12.1047 18.3638H14.6256C16.6966
18.3638 18.3756 16.6849 18.3756 14.6138V4.56433C18.3756 2.49326 16.6966 0.814331 14.6256 0.814331H6.10156C4.03049
0.814331 2.35156 2.49326 2.35156 4.56433ZM6.49381 7.32159C6.40179 7.2405 6.26454 7.23814 6.16979 7.31602L1.83149 10.8818C1.77372 10.9293 1.74023 11.0002 1.74023 11.0749L1.74025 16.6071C1.74025 16.7451 1.85207 16.857 1.99007 16.8571L5.42188 16.8596V14.1996C5.42188 13.7854 5.75766 13.4496 6.17188 13.4496C6.58609 13.4496 6.92188 13.7854 6.92188 14.1996V16.8607L10.6032 16.8634L10.5976 11.0503C10.5975 10.9786 10.5667 10.9104 10.5129 10.863L6.49381 7.32159Z" />
</svg>
Question is:
Why do I need to set width and height in container? If I fail to do so, container takes up 150px by 300px.
How could I just make container automatically shrink to fit home's dimensions?
Thanks
The HTML spec says that if the size of any "replaced element" (that's things like <svg>, <canvas>, <object> etc) is not specified, then its size should default to 300px x 150px.
The <use> points to a <path>, rather than a whole SVG image, so it's size is indeterminate.
Given your use case, you cannot.
I have a series of opaque svg paths that overlap eachother. I want to create a mask based on each shape's previous sibling to mask the overlap.
My problem is that in a case where I have to shapes (fiddle below) the mask based on shape 0 completely removes shape 1
I'm a bit new at SVG, but it was my understanding that the mask "punches a hole" in its coordinates when applied. I expected the mask to remove anything in shape 1 that shares coordinates with shape 0, not completely hiding it. What am I doing wrong?
https://jsfiddle.net/nazhgvL6/3/
<svg pointer-events="none" width="1558" height="1163" viewBox="-130 -97 1558 1163" style="transform: translate3d(-330px, -497px, 0px) scale(1);">
<defs>
<!-- #mask-shape-1 d attribute is the same as the d attribute of the shape 0 path-->
<mask id="mask-shape-1"> <!-- rename ID to turn mask on/off -->
<path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" fill="white"></path>
<path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" rx="5" fill="black"></path>"
</mask>
</defs>
<g>
<!-- shape 0 -->
<path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" mask="url(#mask-shape-0)"></path>
<!-- shape 1 -->
<path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M562 849L522 810L495 770L485 749L482 738L483 715L489 693L498 671L504 661L541 613L573 588L599 576L614 572L643 575L657 578L684 588L697 595L709 603L731 622L749 644L756 656L768 683L772 696L777 731L779 760z" mask="url(#mask-shape-1)"></path>
</g>
</svg>
I'm trying to save this svg code as an image and I'm using notpad for that. But when i'm trying it showing issue like "This XML file does not appear to have any style information associated with it. The document tree is shown below." How can I solve it?
<svg height="18px" width="19px" version="1.1" viewBox="0 0 19 18">
<defs></defs>
<g id="Good-One" fill="none" stroke="none" stroke-width="1">
<g id="Footer_06" fill="#9EA0A6" transform="translate(-1141.000000, -3946.000000)">
<g id="Group-7" transform="translate(0.000000, 3204.000000)">
<g id="Group-6" transform="translate(75.000000, 733.000000)">
<g id="dribbble" transform="translate(976.000000, 9.000000)">
<path id="Shape" d="M103.121936,14.778 C102.743936,13.05 102.293936,11.457 101.843936,10.053 C102.293936,9.99 102.743936,9.954 103.265936,9.954 L103.283936,9.954 C104.120936,9.954 105.038936,10.062 106.037936,10.287 C105.695936,12.15 104.615936,13.743 103.121936,14.778 Z M99.1439356,16.02 C97.5779356,16.02 96.1379356,15.507 94.9679356,14.634 C95.2199356,14.229 95.7509356,13.446 96.6059356,12.636 C97.4699356,11.799 98.6939356,10.935 100.250936,10.422 C100.781936,11.925 101.267936,13.635 101.636936,15.561 C100.862936,15.858 100.043936,16.02 99.1439356,16.02 Z M92.1239356,9 C92.1239356,8.964 92.1239356,8.937 92.1239356,8.901 C92.3219356,8.91 92.5829356,8.91 92.8889356,8.91 L92.8979356,8.91 C94.3019356,8.901 96.7679356,8.784 99.2699356,8.001 C99.4049356,8.298 99.5399356,8.604 99.6749356,8.928 C98.0009356,9.486 96.6869356,10.377 95.7149356,11.25 C94.7879356,12.114 94.1489356,12.951 93.7799356,13.5 C92.7539356,12.294 92.1239356,10.719 92.1239356,9 Z M96.0389356,2.7 C96.5339356,3.285 97.5059356,4.554 98.5499356,6.525 C96.4439356,7.164 94.2929356,7.308 93.0059356,7.308 C92.9699356,7.308 92.9339356,7.308 92.8979356,7.308 L92.8889356,7.308 C92.6729356,7.308 92.4839356,7.308 92.3309356,7.299 C92.8439356,5.283 94.1939356,3.6 96.0389356,2.7 Z M99.1439356,1.98 C100.799936,1.98 102.320936,2.556 103.517936,3.519 C102.599936,4.626 101.393936,5.4 100.070936,5.985 C99.1439356,4.203 98.2439356,2.925 97.6499356,2.142 C98.1359356,2.043 98.6309356,1.98 99.1439356,1.98 Z M104.660936,4.662 C105.533936,5.778 106.082936,7.164 106.154936,8.667 C105.137936,8.451 104.183936,8.352 103.283936,8.352 L103.274936,8.352 C102.554936,8.352 101.879936,8.415 101.240936,8.523 C101.087936,8.145 100.943936,7.785 100.772936,7.434 C102.194936,6.813 103.553936,5.922 104.660936,4.662 Z M99.1439356,3.99680289e-16 C94.1733728,-1.59872116e-15 90.1439356,4.02943725 90.1439356,9 C90.1439356,11.3869484 91.0921471,13.6761336 92.7799746,15.363961 C94.467802,17.0517884 96.7569872,18 99.1439356,18 C101.530884,18 103.820069,17.0517884 105.507897,15.363961 C107.195724,13.6761336 108.143936,11.3869484 108.143936,9 C108.143936,6.61305159 107.195724,4.32386638 105.507897,2.63603897 C103.820069,0.948211563 101.530884,1.99840144e-16 99.1439356,3.99680289e-16 Z"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
I have SVG file with one path and 2 lines in d attribute. It have valid fill and look like this
You can view source of this svg file here img1.svg
I change one line of this svg, I make symbol bold. After changes it look like this
it have a wrong fill.
You can view source of this svg file here img2.svg
What is the reason of invalid fill of second file?
In order that the inner circle is not stained, you need to write fill-rule="evenodd"
More details W3C
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1362.71301" height="300">
<g fill="#ffff00" fill-rule="evenodd" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g><path d="
M77.71,95.66
c-2.96667,0 -5.29,-1.83333 -6.97,-5.5
c-1.64,-3.67333 -2.46,-8.75333 -2.46,-15.24
c0,-3.90667 0.31333,-8.71 0.94,-14.41
c0.78,-7.38667 1.93333,-14.08667 3.46,-20.1
c4.29333,-17.07333 10.52333,-25.61 18.69,-25.61
c2.96667,0 5.27,1.83667 6.91,5.51
c1.68,3.63333 2.52,8.69333 2.52,15.18
c0,3.94667 -0.31333,8.77 -0.94,14.47
c-0.82,7.38667 -1.97,14.08667 -3.45,20.1
c-4.3,17.06667 -10.53333,25.6 -18.7,25.6z
M111.52099,8.30178
c2.06115,1.73429 3.75889,3.86645 5.10023,6.37052
c3.04871,5.64268 4.45878,24.3877 4.45878,24.3877
c0,16.53189 -3.37894,31.27394 -10.19147,44.17397
l-0.00092,0.00173
c-3.89891,7.36538 -8.6741,13.15159 -14.36187,17.27221
c-2.74934,2.00414 -5.66985,3.58411 -8.75938,4.73219
c-4.08503,1.518 -13.03637,2.26991 -13.03637,2.26991
c-7.00914,0 -12.81163,-1.73054 -17.18095,-5.41104
c-2.05687,-1.73261 -3.75131,-3.86164 -5.09027,-6.36127
c-3.04829,-5.64187 -4.45878,-24.3277 -4.45878,-24.3277
c0,-16.571 3.37858,-31.33325 10.19147,-44.23397l0.00309,-0.00584
c3.89784,-7.32217 8.64929,-13.10249 14.28863,-17.26001l0.01363,-0.00996
c2.82017,-2.04262 5.81485,-3.64444 8.98181,-4.79736
c4.04607,-1.47296 8.3447,-2.20287 12.88137,-2.20287
c6.99886,0 12.79443,1.72768 17.16099,5.40178z" id="letter"></path></g>
</g></svg>
Is there any option in SVG to make stroke inside to the element ?
#html-cup {
stroke: #f00;
stroke-opacity: 0.5;
stroke-width: 4px;
fill: #666666;
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg viewBox="0 0 245 123" 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">
<path d="M66.84,122.57 C50.67,122.59 34.5,122.57 18.34,122.59 C12.72,89.4 7.15,56.2 1.53,23.01 C28.9,23 56.26,22.98 83.63,23.02 C83.63,23.02 72.5,89.4 66.84,122.57 Z M23.1,52.01 C36.09,51.99 49.09,52 62.08,52 C60.94,65.26 59.68,78.51 58.54,91.78 C53.32,93.17 48.19,94.97 42.88,96.02 C37.33,95.22 32.05,93.15 26.62,91.77 C25.52,78.51 24.28,65.26 23.1,52.01 Z M30.14,60.03 C38.44,59.97 46.75,60.01 55.06,60 C54.92,61.66 54.77,63.33 54.62,65 L35.77,65 C35.93,66.58 36.07,68.15 36.22,69.73 C42.22,69.77 48.21,69.75 54.21,69.75 C53.78,74.94 53.27,80.12 52.74,85.3 C49.43,86.12 46.21,87.3 42.84,87.84 C39.26,87.46 35.86,86.1 32.39,85.19 C32.16,82.46 31.95,79.72 31.73,76.99 C33.43,77 35.14,77.01 36.84,77.03 C36.96,78.42 37.07,79.82 37.19,81.21 C40.68,82.52 44.37,82.52 47.91,81.39 C48.13,79.26 48.33,77.13 48.55,75 C42.87,75 37.19,75.01 31.51,74.99 C31.01,70 30.59,65.01 30.14,60.03 Z M52.511235,44.83526 C52.5123089,42.8596197 52.52,41 52.52,41 L54.75,41 L54.75,43.2271118 L54.75,45.965769 C55.3578145,45.972676 57.2375163,45.9831949 57.2375163,45.9831949 C57.2375163,45.9831949 57.9778145,45.985769 58.25,45.985769 C58.23,46.725769 58.2499999,48.1957688 58.2499999,48.1957688 C58.2499999,48.1957688 55.6972973,48.195769 53.7301025,48.195769 L52.52,48.195769 C52.5124025,47.2992642 52.5105772,46.0454936 52.511235,44.83526 Z M45.0349255,41 L47.01,43.6621647 L48.9949341,41 L51.0200005,41 C51.0200005,41 51.016932,47.4818916 51.0200005,48.2245641 C50.4613935,48.2062043 48.9949341,48.2245641 48.9949341,48.2245641 L48.9949341,44.6168721 C48.9949341,44.6168721 47.4588808,46.4909331 47.0100002,47.0509057 C46.5212191,46.4358539 45.0349255,44.6168721 45.0349255,44.6168721 C45.0349255,44.6168721 45.0548757,47.3157561 45.0349255,48.2245641 L43,48.2245641 C43.008857,46.080879 43,41 43,41 L45.0349255,41 Z M39.1482782,41.0148674 C39.6855205,41.0137978 40.3552118,41.0142539 41.220459,41.0178052 C41.2179565,41.8484326 41.2179565,43.28 41.2179565,43.28 C41.2179565,43.28 39.268809,43.2799999 39.1999998,43.2799999 C39.1899998,44.7199999 39.23,46.83 39.2,48.28 C38.65,48.29 39.1999998,48.2800002 37,48.2800002 L37,43.33 C36.7652074,43.3253041 36.4201598,43.3184032 36.0684053,43.3103326 C35.6710848,43.3012166 35,43.28 35,43.28 L35,41 C36.9693426,41.0480327 36.9919583,41.0191607 39.1482782,41.0148674 Z M28.75,40.99 C28.75,41.2714527 28.7480041,41.6786445 28.7457957,42.0983357 C28.7430609,42.6180758 28.74,43.1569852 28.74,43.5 L31.26,43.5 C31.26,43.2967853 31.2589257,43.0248153 31.2574813,42.7291611 C31.254519,42.1227861 31.25,41.4167853 31.25,41 L33.51,41 C33.5,43.4 33.51,45.84 33.51,48.24 C32.96,48.25 31.8499999,48.22 31.2999999,48.24 C31.2699999,47.61 31.3199999,46.3700002 31.2999999,45.7500002 L30.708252,45.7500002 L28.71,45.7500002 C28.69,46.3700002 28.73,47.62 28.71,48.24 C28.16,48.23 27.3096924,48.24 26.49,48.24 C26.49,45.84 26.5,43.4 26.49,41 C27.06,41 28.18,41 28.75,40.99 Z"
id="html-cup"></path>
<path d="M73.905,0.211380899 L76.155,10.7813809 L83.5892007,10.7013808 L85.865,18.5013809 L0.135,18.4613809 L2.73507334,10.7013808 L9.995,10.7013809 C9.995,10.7013809 11.605,3.6413809 12.425,0.121380899 L73.905,0.211380899 L73.905,0.211380899 Z" id="html-top"
fill="#666666"></path>
</g>
</svg>
Alert: Alignment with SVG elements is deprecated.
You can not align stoke. By default stroke is aligned from the middle.
Previously you could do this but this is deprecated
stroke-alignment="inner";