I created an app to parse SVG code into a JSON object which can be saved to a database and another app to dynamically render it on a webpage. When it renders it comes out looking like this
As you can see the open paths seem to connect and partially fill the svg, however when running the raw SVG file it doesn't have that problem which you can see by running the snippet below.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="part_x5F_assembly" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 513 225" style="enable-background:new 0 0 513 225;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path id="rivet_x5F_d" d="M280.56015,179.823257l-1.200012,3.900024l-0.192719,8.851166
c0.333344,0.799988,2.016693,0.899994,2.200012,0.100006l0.192719-8.851196L280.56015,179.823257z M281.015656,204.766052
c3.433411,0.268616,6.039734,1.376923,6.010345,2.640396c-0.032501,1.397034-3.274994,2.454742-7.24234,2.362457
c-3.967316-0.09227-7.157135-1.299591-7.124634-2.696625c0.02951-1.269516,2.777527-2.267685,6.243713-2.368454
M281.562378,183.824097c-0.009552,0.214111-0.510468,0.365646-1.118805,0.338486
c-0.608368-0.027161-1.093781-0.222763-1.084229-0.436874 M281.16745,200.380295l-0.207306,6.842987l0.000427,0.000168
c-0.099365,0.404099-1.80249,0.544724-2.09314,0.05098l0.100006-6.952957 M287.029053,207.274704l-0.104156,6.354156
c-0.032715,1.406219-3.275391,2.47139-7.242706,2.379105c-3.94046-0.091644-7.113708-1.290634-7.124481-2.684692l0.102417-6.400009"
/>
<path id="washer_x5F_d" d="M288.090179,171.017059c-0.041382,1.396545-3.308899,2.432846-7.298218,2.314651
c-3.989319-0.11821-7.189758-1.346161-7.148376-2.742706s3.308899-2.432846,7.298218-2.314636
S288.131561,169.620529,288.090179,171.017059z M273.643646,170.518005l-0.078186,1.034546
c-0.041382,1.396545,3.159058,2.624481,7.148376,2.742691s7.256836-0.918091,7.298218-2.314636l0.077667-0.94104
M280.856323,170.420334c-0.589935-0.017471-1.072998,0.131073-1.078949,0.331802
c-0.005951,0.200745,0.467468,0.37764,1.057434,0.395111c0.589935,0.017487,1.072998-0.131073,1.078949-0.331802
S281.446289,170.43782,280.856323,170.420334z"/>
<path id="rivet_x5F_c" d="M202.055603,107.303535l-1.200012,3.900024l-0.099991,6.099976
c0.333344,0.799988,1.916687,0.799988,2.099991,0l0.200012-6L202.055603,107.303535z M202.514557,132.098129
c3.433395,0.269867,6.039536,1.385056,6.009949,2.65686c-0.032715,1.406219-3.275375,2.471375-7.242706,2.379089
c-3.967331-0.09227-7.156967-1.307053-7.124268-2.713272c0.029724-1.277863,2.71019-2.274094,6.176392-2.376053
M203.057846,111.304375c-0.009567,0.214111-0.510483,0.365654-1.118835,0.338486
c-0.608353-0.027161-1.093765-0.222755-1.084198-0.436867 M202.655579,125.70356l-0.199982,8.999992l0.000443,0.000183
c-0.170944,0.441269-2.141541,0.370682-2.201691-0.102081l0.301254-9.398094 M208.524506,134.75499l-0.104172,6.354156
c-0.0327,1.406219-3.275375,2.47139-7.242706,2.379105c-3.94043-0.09166-7.113693-1.290634-7.124481-2.684708l0.102448-6.400009"/>
<path id="washer_x5F_c" d="M209.470398,99.449356c-0.041382,1.396545-3.308914,2.432846-7.298218,2.314636
c-3.989319-0.118202-7.189758-1.346146-7.148376-2.742691s3.308899-2.432846,7.298218-2.314636
C206.31134,96.824867,209.51178,98.052811,209.470398,99.449356z M195.023865,98.950294l-0.078186,1.034546
c-0.041382,1.396545,3.159058,2.624489,7.148376,2.742699c3.989304,0.118202,7.256836-0.918098,7.298218-2.314636l0.077667-0.94104
M202.236542,98.852631c-0.589951-0.017487-1.073013,0.131073-1.078964,0.331802s0.467484,0.377632,1.057434,0.395111
s1.073013-0.131073,1.078964-0.33181C203.299927,99.047005,202.826492,98.87011,202.236542,98.852631z"/>
<path id="rivet_x5F_b" d="M89.075882,140.508438l-1.200012,3.900024l-0.224045,8.750336
c0.333351,0.799988,2.03228,0.815643,2.215591,0.015656l0.208466-8.666016L89.075882,140.508438z M89.534836,165.30304
c3.433395,0.269852,6.039536,1.385056,6.009949,2.656845c-0.032707,1.406219-3.275375,2.47139-7.242706,2.379105
s-7.156967-1.307053-7.12426-2.713272c0.029724-1.277878,2.71019-2.274109,6.176392-2.376068 M90.078125,144.509277
c-0.009567,0.214111-0.510483,0.365662-1.118828,0.338486c-0.608353-0.027161-1.093765-0.222748-1.084206-0.436859
M89.66156,161.556778l-0.185684,6.351685l0.000435,0.000168c-0.196495,0.547379-2.125908,0.484634-2.201683-0.102066
l0.195755-6.688034 M95.544785,167.959885l-0.104164,6.354172c-0.032707,1.406219-3.275375,2.471375-7.242706,2.379105
c-3.940437-0.09166-7.113693-1.290634-7.124481-2.684708l0.10244-6.400009"/>
<path id="washer_x5F_b" d="M96.553238,132.554749c-0.041382,1.396545-3.308907,2.432846-7.298225,2.314636
c-3.989311-0.11821-7.189751-1.346146-7.148369-2.742691s3.308907-2.432846,7.298225-2.314636
C93.39418,129.930252,96.59462,131.158203,96.553238,132.554749z M82.106705,132.055679l-0.078186,1.034561
c-0.041382,1.39653,3.159058,2.624481,7.148369,2.742691c3.989319,0.118195,7.256844-0.918091,7.298225-2.314636l0.077667-0.94104
M89.319389,131.958023c-0.589951-0.017487-1.073021,0.131073-1.078972,0.331802s0.467484,0.377625,1.057434,0.395111
c0.589951,0.017471,1.073021-0.131073,1.078964-0.331802C90.382767,132.15239,89.90934,131.975494,89.319389,131.958023z"/>
<path id="rivet_x5F_a" d="M10.56743,67.874428l-1.200012,3.900024l-0.099991,6.099976
c0.333348,0.799988,1.916682,0.799988,2.099991,0l0.200012-6L10.56743,67.874428z M11.026379,92.669029
c3.433398,0.269859,6.039536,1.385056,6.009954,2.656853c-0.032709,1.406219-3.27538,2.471375-7.242709,2.379097
s-7.156969-1.307053-7.12426-2.713272c0.029723-1.27787,2.710191-2.274101,6.176391-2.37606 M11.569667,71.875267
c-0.009562,0.214111-0.510477,0.365662-1.118827,0.338493c-0.608349-0.027168-1.093762-0.222763-1.084201-0.436874
M11.167405,86.274452l-0.199982,9l0.000436,0.000175c-0.200418,0.56646-2.096251,0.608124-2.201689-0.102074l0.301259-9.398102
M17.036333,95.325882l-0.104168,6.354164c-0.032707,1.406219-3.275379,2.471382-7.242707,2.379097
c-3.940436-0.091652-7.11369-1.290634-7.124483-2.6847l0.102445-6.400009"/>
<path id="washer_x5F_a" d="M18.06496,58.3578c-0.04138,1.396542-3.308907,2.432842-7.298223,2.314636
s-7.189753-1.346149-7.148373-2.742695s3.308906-2.432842,7.298223-2.314636
C14.905905,55.733307,18.10634,56.961254,18.06496,58.3578z M3.618422,57.858734l-0.078183,1.03455
c-0.04138,1.396542,3.159055,2.624489,7.148373,2.742695c3.989317,0.118202,7.256844-0.918095,7.298223-2.31464l0.077665-0.941036
M10.831109,57.76107c-0.589952-0.017483-1.073023,0.131073-1.078971,0.331806
c-0.005948,0.200729,0.467481,0.377628,1.057432,0.395107c0.589951,0.017479,1.073022-0.131073,1.07897-0.331806
S11.42106,57.778549,10.831109,57.76107z"/>
<path id="middle_x5F_arm" d="M273.167419,193.074448l-0.099976,5.299988 M282.967407,195.074448l-0.099976,5.199982
M398.667419,216.974442l-0.200012,5.299988l-33-5.399994l-82.599976-16.600006
c-4.169067,0.391602-8.058319-0.18335-9.799988-1.899994l-62.100021-12.5 M365.567444,211.574448l-0.100037,5.299988
M187.867416,175.974442l-102.5-20.600006c-7.529388-1.958847-2.670563-4.74707,2.364716-4.700012 M205.167435,179.374435
l67.999985,13.700012c2.037537,1.849976,5.377686,2.394348,9.799988,2l82.600037,16.5l33.099976,5.399994l-29.700012-7.600006
l-81.599976-17.199982c-1.021851-1.187531-3.303101-1.890656-6-2.100006 M89.924301,150.670502
c0.635376,0.035706,1.407196,0.136642,2.243103,0.30394l89.100006,18.800018 M279.218445,190.074417
c-0.380493-0.043671-0.936951,0.011932-1.551025,0.100037l-78.699997-16.600006 M195.167435,182.674454l-109.900024-22
c-2.296021-0.453644-3.921844-1.453156-3.899994-2.399994l0.100006-5.300018"/>
<path id="outer_x5F_arm_x5F_b" d="M45.567429,93.274452l0.099976-5.200012 M188.76741,119.874428l0.200012-5.199982
M364.367432,158.174454l0.099976-5.200012 M387.467407,159.374435l0.200012-5.299988 M397.967407,164.674454l0.100037-5.300018
M478.567444,180.974442l0.099976-5.299988 M511.667419,181.074448l-0.099976,5.299988l-33-5.399994l-80.600037-16.299988
l-10.5-5.300018l-23.099976-1.199982l-166.000015-33.400002c-3.749298-0.925629-7.224976-2.850037-9.600006-4.900024
c-19.999969-1.637512-39.062469-4.543762-54.899994-8.899994 M200.867416,112.874428l-5.100006-2.599976
c-33.416641-0.266701-72.937469-10.350037-81.299988-18.200012h-0.399994 M92.26741,90.874428
c-25.791634-3.075012-63.291634-10.84584-62.299988-14.699982c-7.478088-0.823578-14.246858-1.218781-18.5-1.100006
M9.367417,75.274452c-1.606455,0.0392-4.012516,0.425331-5.318726,1.196838
c-1.608228,0.949898-1.606133,2.408119,2.918732,3.603149l38.699982,8c17.808372,1.704147,38.058372,5.162476,52.400024,7.899994
M288.967407,132.674454l80.5,17l23.600037,1.199982l14.299988,7.300018l74.700012,15.299988l29.599976,7.600006l-33-5.399994
l-80.599976-16.300018l-10.400024-5.299988l-23.200012-1.100006l-165.999985-33.500008
c-3.642517-0.969666-6.851532-2.51358-9.5-4.799988c-21.741653-1.791695-45.866653-5.416695-63.200012-11.399994
M274.067444,129.574448l-68.900009-14.500008l-2.200012-1.100006 M105.567429,102.774452
c-15.331238-3.193787-38.674988-7.350037-60-9.5L6.867417,85.374428c-2.095016-0.498901-3.899976-1.19413-3.899994-2.399994
l0.100006-5.299988"/>
<path id="outer_x5F_arm_x5F_a" d="M3.767426,16.274456c10.125015-0.318788,27.093765,14.274963,31.599991,25.400024
M3.967423,10.974467l-0.199997,5.299989 M34.467422,42.774456l-0.100006,5.299988
c19.900024,4.183308,36.775024,16.412472,37.600006,25.200008 M71.867416,73.874428L71.76741,79.07444l12,4.100006
l69.200012,62.299995 M83.967422,77.874428l-0.200012,5.300018 M163.467422,139.174454l-0.100006,5.299988l-0.299988,3
M170.867416,154.874435l-0.100006,5.200012 M217.76741,194.674454l-0.199982,5.199982l-16.200012-11.5l-30.600006-28.299988
l-18.099976-6.100006l0.099976-5.299988 M201.467422,183.174454l-0.100006,5.199982 M97.467422,76.374428l66,62.800026
l-0.700012,8.199982l13.300018,4.5l32.199982,30.5l9.5,12.300018l-16.299988-11.5l-30.600006-28.300018l-18.100006-6.199982
l0.600006-8.300018L83.967422,77.874428l-12.100006-4c4.462524-11.387508-16.662476-27.387508-37.399994-31.099972
c7.706268-7.162537-17.94998-32.225037-30.5-31.799988C2.892442,8.007751,2.940156,5.352093,4.934109,3.757752
c3.323246-2.65723,11.916666-1.979167,14.033316,0.016703l15.899992,14.700013
c17.025024,36.137451,42.525024,25.637451,50.5,53.799984C87.189316,72.596291,94.908066,74.299416,97.467422,76.374428
M3.767426,16.274456L3.06743,12.574443l0.205895-5.500024 M12.19432,4.168589
c-0.489383-0.015873-0.891171,0.127439-0.89742,0.320095c-0.006248,0.192657,0.385408,0.361704,0.874791,0.377577
c0.489383,0.015873,0.891171-0.127439,0.89742-0.320096C13.075359,4.353508,12.683702,4.184462,12.19432,4.168589z
M90.697182,76.792923c-0.489388-0.015877-0.891174,0.127441-0.897423,0.320099
c-0.006248,0.19265,0.385406,0.361702,0.874794,0.377571c0.48938,0.015877,0.891167-0.127434,0.897415-0.320091
S91.186562,76.808792,90.697182,76.792923z"/>
<path id="support_x5F_arm" d="M284.467407,124.374428l-74.199997-71
c-4.281219-3.262512-16.437469-1.762512-13.599976,1.5l78.799973,70.5c-3.324951,2.331238,4.849976,4.837532,10.200012,3.600014
C291.017456,127.736916,290.173706,125.486916,284.467407,124.374428z M274.567444,129.974442L196.567429,60.17448
c-0.231354-0.241238-0.432098-0.41967-0.432098-0.691406l0.002686,0.011932l0.100006-5.512695 M289.267456,126.874428
l-0.200012,5.300026c-1.029175,3.124969-13.299988,3.374969-14.5-0.399994l0.099976-5.20002 M203.447128,53.752544
c-0.522079,0-0.945312,0.150402-0.945312,0.335938c0,0.185532,0.423233,0.335938,0.945312,0.335938
s0.945312-0.150406,0.945312-0.335938C204.392441,53.902946,203.969208,53.752544,203.447128,53.752544z M281.967438,126.388496
c-0.522095,0-0.945312,0.150406-0.945312,0.335938c0,0.185539,0.423218,0.335938,0.945312,0.335938
c0.522064,0,0.945312-0.150398,0.945312-0.335938C282.91275,126.538902,282.489502,126.388496,281.967438,126.388496z"/>
</svg>I created 2 components for rendering the SVG which are called SvgBuilder and SvgComponent. The Template files for these components look like this
svg-builder.component.svg
<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="GraphicViewBox" width="100%" height="100%%">
<!-- The css classes are inserted here -->
<style type="text/css" *ngIf="GlobalStyling !== ''" [innerHtml]="insertStyles()"></style>
<!-- The svg data is iterated here as a symbol -->
<defs>
<symbol #symbolShell [attr.id]="SvgData.graphicId" [attr.viewBox]="GraphicViewBox">
<!-- The svg component -->
<svg:g svg-component *ngFor="let item of SvgData.elements" [ElementData]="item"></svg:g>
</symbol>
</defs>
<!-- Graphic used here -->
<svg>
<use [attr.xlink:href]="SymbolLink" />
</svg>
</svg>
svg.component.svg
<svg>
<g *ngIf="TemplateType === 'single element'" [innerHtml]="insertElement()"></g>
<g #graphicContainer *ngIf="TemplateType == 'group element'">
<svg:g svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg:g>
</g>
<linearGradient #graphicContainer *ngIf="TemplateType === 'linear gradient'">
<svg:g svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg:g>
</linearGradient>
<radialGradient #graphicContainer *ngIf="TemplateType === 'radial gradient'">
<svg:g svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg:g>
</radialGradient>
<symbol #graphicContainer *ngIf="TemplateType === 'linear gradient'">
<svg:g svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg:g>
</symbol>
</svg>
Does this shed any light on what could be happening in Angular to make that occur? You can test it for yourself here by following the instructions on the screen copying and pasting the code in the demo.svg file which is located at
src/app/micro-frontends/svg-builder
incase it for some reason isn't the file already open when the stackblitz loads.
CodePudding user response：
Actually my problem wasn't the SVG, it was the function I created to build the css properties which looks like this
private createCssProperty(prop: OvaadSvgStyleProperty): string{
return `${prop.property}:${prop.setting}`;
}
The problem is I forgot to add a ; at the end of the string making it to where the css rules were being structured like this
.st0{ fill:none stroke: #000000 stroke-width: 0.6 stroke-linecap: round stroke-linejoin: round stroke-miterlimit: 10 }
which wasn't making sense to the browser so I added the semicolon at the end of the string as follows
private createCssProperty(prop: OvaadSvgStyleProperty): string{
return `${prop.property}:${prop.setting};`;
}
and it works perfectly now :).