< g>元素不适用于< svg>在Firefox上 [英] <g> element does not adapt to <svg> on Firefox

问题描述

使用ES6的D3js模块运行Angular 6应用程序会导致Firefox出现问题( Chromium，Chrome，Safari和IE Edge正常运行).伪代码看起来与此类似(生产代码可以在下方找到):

Running an Angular 6 application with ES6'ish D3js modules causes issues on Firefox (Chromium, Chrome, Safari and IE Edge working fine). The pseudo code looks similiar to that (production code can be found further down):

<svg width="500" height="500">
  <g>
    <path ../>
  </g>
</svg>

似乎无法将<g>组设置为<svg>画布的对数.在生产代码中，我正在自动设置<svg>的width和height.

It looks like the <g> group cannot be set to the dimensons of the <svg> canvas. Inside the production code I am setting up the width and height of the <svg> automatically.

技术堆栈:

• Angular 6(TypeScript)
• D3js
• SVG

如果您将dimensons手动添加到svg，则它仅在Firefox中可以正常工作.

It only works fine in Firefox, if you put in the dimensons manually to the svg.

<svg height="500" width="500"><g stroke="#129490" stroke-width="0.7" fill="none"><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,124.55092641298057,166.29684638576944C135.70439320440502,124.75070527297424,158.01132678725386,107.0189616008566,186.47356473830305,93.3286169517524C214.93580268935227,79.63827230264819,249.5533450086018,69.9893266765574,249.5533450086018,69.9893266765574C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,125.75151434801296,167.45285952930737C138.1055690744698,127.06273156005011,162.81367852738342,111.64301417500833,191.2759164784326,97.95266952590411C219.73815442948182,84.2623248767999,251.95452087866659,72.30135296363325,250.75393294363423,71.14533982009533C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,123.35033847794818,165.14083324223154C133.30321733434025,122.43867898589839,153.2089750471243,102.39490902670491,181.6712129981735,88.7045643776007C210.13345094922272,75.01421972849649,247.15216913853703,67.67730038948154,248.3527570735694,68.83331353301948C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,126.95210228304535,168.6088726728453C140.50674494453457,129.37475784712595,167.61603026751297,116.26706674916004,196.07826821856216,102.57672210005582C224.54050616961138,88.88637745095161,254.35569674873136,74.61337925070912,251.95452087866659,72.30135296363325C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,122.1497505429158,163.9848200986936C130.90204146427547,120.12665269882253,148.40662330699476,97.77085645255319,176.86886125804395,84.08051180344899C205.33109920909314,70.39016715434478,244.75099326847226,65.36527410240569,247.15216913853703,67.67730038948154C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,128.15269021807774,169.76488581638324C142.90792081459935,131.68678413420182,172.41838200764255,120.89111932331177,200.8806199586917,107.20077467420754C229.34285790974093,93.51043002510333,256.75687261879614,76.92540553778497,253.15510881369894,73.45736610717118C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,120.94916260788341,162.82880695515567C128.5008655942107,117.81462641174669,143.6042715668652,93.14680387840149,172.0665095179144,79.45645922929727C200.5287474689636,65.76611458019306,242.34981739840748,63.05324781532983,245.95158120350462,66.52128724594361C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,129.35327815311013,170.92089895992117C145.30909668466413,133.99881042127768,177.2207337477721,125.51517189746346,205.68297169882126,111.82482724835926C234.14520964987048,98.13448259925504,259.1580484888609,79.23743182486082,254.35569674873136,74.61337925070912C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,119.748574672851,161.67279381161774C126.09968972414589,115.50260012467083,138.80191982673563,88.52275130424978,167.26415777778485,74.83240665514556C195.72639572883404,61.14206200604136,239.9486415283427,60.74122152825398,244.75099326847226,65.36527410240569C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,130.5538660881425,172.0769121034591C147.7102725547289,136.31083670835355,182.02308548790165,130.1392244716152,210.48532343895081,116.44887982251096C238.94756139000003,102.75853517340676,261.5592243589257,81.54945811193669,255.55628468376378,75.76939239424705C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,118.54798673781863,160.5167806680798C123.69851385408111,113.19057383759497,133.99956808660608,83.89869873009808,162.4618060376553,70.20835408099386C190.92404398870448,56.51800943188965,237.5474656582779,58.42919524117813,243.55040533343984,64.20926095886776C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,131.7544540231749,173.23292524699704C150.11144842479368,138.6228629954294,186.8254372280312,134.7632770457669,215.28767517908037,121.07293239666268C243.74991313012958,107.38258774755847,263.96040022899047,83.86148439901254,256.75687261879614,76.92540553778497C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,117.34739880278623,159.3607675245419C121.29733798401634,110.87854755051912,129.19721634647652,79.27464615594637,157.65945429752574,65.58430150684215C186.12169224857493,51.89395685773794,235.14628978821315,56.117168954102276,242.34981739840748,63.05324781532983C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,132.9550419582073,174.38893839053495C152.51262429485845,140.93488928250522,191.62778896816076,139.38732961991863,220.09002691920992,125.6969849708144C248.55226487025914,112.00664032171018,266.36157609905524,86.17351068608839,257.9574605538285,78.08141868132289C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,116.14681086775386,158.20475438100397C118.89616211395156,108.56652126344325,124.39486460634697,74.65059358179465,152.8571025573962,60.96024893269043C181.31934050844538,47.26990428358622,232.74511391814835,53.805142667026416,241.14922946337506,61.8972346717919C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,134.15562989323968,175.54495153407288C154.91380016492323,143.2469155695811,196.4301407082903,144.0113821940703,224.89237865933947,130.32103754496612C253.35461661038872,116.6306928958619,268.76275196912,88.48553697316424,259.1580484888609,79.23743182486082C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,114.94622293272145,157.04874123746603C116.49498624388679,106.25449497636741,119.59251286621742,70.02654100764295,148.05475081726664,56.336196358538736C176.51698876831583,42.645851709434524,230.3439380480836,51.49311637995057,239.9486415283427,60.74122152825398C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,135.35621782827207,176.7009646776108C157.314976034988,145.55894185665696,201.23249244841986,148.63543476822204,229.69473039946902,134.94509011911782C258.1569683505183,121.25474547001362,271.1639278391848,90.79756326024011,260.3586364238933,80.39344496839875C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,113.74563499768908,155.8927280939281C114.09381037382201,103.94246868929156,114.79016112608787,65.40248843349123,143.25239907713708,51.712143784387024C171.71463702818627,38.02179913528281,227.9427621780188,49.181090092874705,238.7480535933103,59.585208384716054C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,136.55680576330448,177.85697782114872C159.71615190505278,147.87096814373282,206.0348441885494,153.25948734237375,234.49708213959866,139.56914269326953C262.95932009064785,125.87879804416532,273.56510370924957,93.10958954731598,261.5592243589257,81.54945811193669C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,112.54504706265668,154.73671495039017C111.69263450375723,101.6304424022157,109.98780938595831,60.77843585933953,138.45004733700753,47.08809121023532C166.91228528805672,33.39774656113111,225.54158630795405,46.86906380579885,237.54746565827793,58.42919524117813C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,137.75739369833684,179.01299096468665C162.11732777511756,150.18299443080866,210.83719592867897,157.88353991652548,239.2994338797282,144.19319526742126C267.7616718307774,130.50285061831704,275.9662795793144,95.42161583439183,262.7598122939581,82.7054712554746C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,111.3444591276243,153.58070180685226C109.29145863369246,99.31841611513984,105.18545764582876,56.15438328518781,133.64769559687798,42.46403863608361C162.10993354792717,28.773693986979392,223.14041043788924,44.557037518723,236.3468777232455,57.273182097640195C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,138.95798163336926,180.16900410822458C164.51850364518234,152.49502071788453,215.63954766880852,162.50759249067718,244.10178561985776,148.81724784157296C272.56402357090695,135.12690319246875,278.3674554493791,97.73364212146767,263.96040022899047,83.86148439901254C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,110.1438711925919,152.42468866331433C106.89028276362768,97.006389828064,100.38310590569921,51.53033071103612,128.8453438567484,37.83998606193191C157.30758180779762,24.149641412827695,220.7392345678245,42.24501123164715,235.14628978821315,56.117168954102276C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path><path d="M113.39745962155612,338.5640646055102L113.39745962155614,305.88379532877383C113.39745962155614,273.20352605203743,113.39745962155614,207.84298749856467,140.15856956840165,181.32501725176255C166.91967951524714,154.8070470049604,220.44189940893816,167.13164506482892,248.90413735998732,153.44130041572467C277.3663753110365,139.75095576662048,280.76863131944395,100.04566840854353,265.16098816402285,85.01749754255047C249.5533450086018,69.9893266765574,214.93580268935227,79.63827230264819,214.85934287313148,110.70044784962654C214.7828830569107,141.7626233966049,249.24750574371865,194.23802886447083,260.5113682015654,186.35783902312616C271.7752306594121,178.4776491817814,259.8383328882976,110.241864031226,260.32006821295045,112.04255015165457C260.80180353760335,113.84323627208312,273.70217195802365,185.68039366349566,280.1523561682338,188.91870308246553C286.6025403784439,192.15701250143536,286.6025403784439,126.79647394796258,286.60254037844385,94.11620467122619L286.6025403784439,61.4359353944898"></path></svg>

<svg #svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
version="1.1" shape-rendering="geometricPrecision">
  <g guilloche></g>
</svg>

TypeScript

import { Renderer2, RendererFactory2 } from '@angular/core';
import * as Selection from 'd3-selection';

@Directive({
  selector: '[guilloche]'
})

@ViewChild('svg') svgElementRef;

constructor(
  private rendererFactory: RendererFactory2
) {
  this.renderer = rendererFactory.createRenderer(null, null);
}

this.group = Selection.select(el.nativeElement);
this.canvas = this.svgElementRef.nativeElement;

const points = [{x: 0, y: 1}, ...]; // A list of coordinates

this.group
  .attr('stroke', this.graph.color)
  .attr('stroke-width', this.graph.stroke)
  .attr('fill', 'none');

this.group.append('path')
  .attr('d', Shape.line()
    .x(p => p.x)
    .y(p => p.y)
    .curve(Shape.curveBasis)(points)));

// Adjusting the SVG element on several events like window resizing or changes of parameters

this.renderer.setStyle(
  this.canvas,
  'width',
  window.innerWidth
);

this.renderer.setStyle(
  this.canvas,
  'height',
  window.innerHeight
);

浏览器示例

产生Chromium 68.0.3440.75

一切看起来都不错，就位.

Browser examples

Result in Chromium 68.0.3440.75

Everything looks nice and in place.

该组缩小到随机的宽度和高度.

The group shrinks to a random width and height.

如何使<g>元素的对数适应相应的<svg>元素?

How to adapt the dimensons of an <g> element to the corresponding <svg> element?

外部示例

源代码: https://github.com/nextlevelshit/nls-ng6- d3js-guilloche
实时演示: https://b612.dailysh.it/

External examples

Source Code: https://github.com/nextlevelshit/nls-ng6-d3js-guilloche
Live Demo: https://b612.dailysh.it/

推荐答案

获得<svg>的正确尺寸始终是一个有趣的话题.

Attaining correct dimensions for <svg>s is always an interesting topic.

无论如何，我只是搜索了SVG的相关尺寸问题，并发现了以下Firefox错误: https://bugzilla.mozilla.org/show_bug.cgi?id=874811

Anyway, I just searched for relevant dimension issues for SVGs and found this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=874811

依次引用 W3C文档(通过评论)，其中明确指出以下内容:

which in turn refers to W3C docs (via a comment) which clearly states the following:

如果元素没有关联的CSS布局框，或者CSS布局框为内联，则返回零.

If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.

我不确定Chrome如何分配正确的尺寸(从未调试过)，但是Firefox遵循上述规则.

I'm not exactly sure how Chrome assigns the correct dimensions (have never debugged that) but Firefox follows the above rule.

Firefox的getBoundingClientRect出现了另一个类似的大问题 ，该错误曾经输出0(与clientHeight/clientWidth相同)，但此问题已得到解决: https://bugzilla.mozilla.org/show_bug.cgi?id=530985

Another major bug WITH A SIMILAR DIMENSIONS ISSUE was raised for Firefox for getBoundingClientRect which used to output 0 (same as clientHeight/clientWidth) but this was fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=530985

因此，为了修复您的代码/库并使其适用于Firefox，我想出了一些简单的方法:

So, in order to fix your code/lib and make it work for Firefox, I've come up with simple approaches:

方法1:

在将CSS width:100%和height:100%添加到<svg>的父级时，可以在 updateMatrix 中将this.canvas.clientWidth替换为(this.canvas.clientWidth || this.canvas.parentNode.clientWidth)，将this.canvas.clientHeight替换为(this.canvas.clientHeight || this.canvas.parentNode.clientHeight).强>方法.

As you're adding CSS width:100% and height:100% to <svg>'s parent, you can replace this.canvas.clientWidth with (this.canvas.clientWidth || this.canvas.parentNode.clientWidth) and this.canvas.clientHeight with (this.canvas.clientHeight || this.canvas.parentNode.clientHeight) in the updateMatrix method.

例如:

const totalArea = Math.abs((this.canvas.clientWidth || this.canvas.parentNode.clientWidth) * (this.canvas.clientHeight || this.canvas.parentNode.clientHeight));
const totalCenter = this.math.centerOfArea((this.canvas.clientWidth || this.canvas.parentNode.clientWidth), (this.canvas.clientHeight || this.canvas.parentNode.clientHeight));

或者您可以将它们设置为常量.你的选择.而且我看到只有两行-都在 updateMatrix 方法中.如果svg具有某些边距，边界等，则此方法可能会弄乱.

or you could set them up as constants. Your choice. And I see there are just 2 lines - both in the updateMatrix method. This approach might mess up if svg has certain margins, borders etc.

方法2:

如上所述，有关getBoundingClientRect的错误已在Firefox中修复，您可以通过以下方式使用它:

As I mentioned above the bug about getBoundingClientRect which is now fixed in Firefox, you can use it the following way:

例如，

const totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height);
const totalCenter = this.math.centerOfArea(this.canvas.getBoundingClientRect().width, this.canvas.getBoundingClientRect().height);

或将它们设置为常量.同样，您的选择.

or set them as constants. Again, your choice.

我通过在控制台中进行覆盖来尝试了上述两种方法，并且似乎工作正常.

I tried both of the above approaches by overriding in the console and it seems to work fine.

在这里通过各种方法通过控制台日志记录维度来清除问题.尝试使用其他浏览器:

Here's a fiddle to clear things up by console logging dimensions with different methods. Try different browsers:

https://jsfiddle.net/shashank2104/mfksxwgo/

摘要:

$(function () {
  var svg = document.getElementById('foo');
  
  console.log( svg.clientWidth, svg.clientHeight);
  console.log( svg.parentNode.clientWidth, svg.parentNode.clientHeight);
  console.log( svg.getBoundingClientRect().width, svg.getBoundingClientRect().height);
  console.log( svg.width.baseVal.value, svg.height.baseVal.value);
});

div { 
  width: 200px; 
  height: 200px; 
  background: #00f; 
}

svg { 
  width: 100%; 
  height: 100%; 
  background: #f00; 
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

</head>
<body>
  <div>
    <svg id="foo"></svg>
  </div>
</body>
</html>

我无法将您的lib复制为fork，但是我确实使用上述方法在Firefox控制台中进行了检查，并且效果很好(我在小提琴中使用了第3种方法).如果您遇到任何问题，请告诉我.希望这可以帮助.

I could not reproduce your lib as a fork but I did check in the Firefox console with the above approaches and those do work fine (I've used a 3rd approach in the fiddle btw). Let me know if you face any issues. Hope this helps.

这篇关于< g>元素不适用于< svg>在Firefox上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！