logo标签列表

<g>元素在Firefox上不能适应<svg>元素

javascriptangularfirefoxd3.jssvg
3

使用ES6模块运行Angular 6应用程序会在Firefox上出现问题（Chromium、Chrome、Safari和IE Edge正常工作）。伪代码类似于以下内容（生产代码可在下面找到）：

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

看起来 <g> 组无法设置为 <svg> 画布的尺寸。在生产代码中，我自动设置了 <svg> 的 width 和 height。

技术栈：

  • Angular 6（TypeScript）
  • D3js
  • SVG

运行代码示例

只有在 Firefox 中手动将尺寸输入到 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>

HTML

<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中的结果

一切看起来都很好，位置也很合适。

在Chromium中的结果

在Firefox Quantum 61.0.1 (64位)中的结果

组缩小到随机宽度和高度。

输入图像描述信息

如何使 <g> 元素的尺寸适应相应的 <svg> 元素？

外部示例

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

3
<g>元素没有可以设置的大小，它只有其内容元素的边界框。不同之处在于<svg>元素。Chrome会设置style="width:768px;height:199"，而Firefox只有一个style=""。以下是操作该元素的代码： - ccprog
@ccprog 我刚刚完成了代码库。 - Michael W. Czechowski
虽然我还不能完全回答，但我有一个观察结果：在Firefox上，路径数据似乎从来没有被设置为有意义的值。在Chrome开发工具中，我可以看到每次“更新”单击都会计算新路径，但在Firefox上它们总是保持不变，并且大多数路径除了零以外几乎没有任何内容。您的代码中的某些部分似乎没有运行。 - ccprog
鉴于1. svg样式未设置（由canvasService.adjustToWindow完成）和2.路径数据未更新（由GraphsComponent.updateMatrix完成），一切都指向GraphsComponent.ngOnChanges未被触发。另一方面，我可以看到submit/ngSubmit事件监听器附加到配置表单上。因此，您的错误在中间 - 我对Angular的了解不足以找到它。 - ccprog
1个回答
1
获得正确的<svg>尺寸总是一个有趣的话题。无论如何，我刚刚搜索了与SVG相关的尺寸问题，并发现了这个Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=874811，它又引用了W3C docs（通过评论），其中明确指出以下内容：

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

我不确定Chrome如何分配正确的尺寸（从未调试过），但Firefox遵循上述规则。
Firefox还存在另一个类似尺寸问题的主要错误，即getBoundingClientRect输出0（与clientHeight/clientWidth相同），但已经修复：https://bugzilla.mozilla.org/show_bug.cgi?id=530985。
所以，为了修复你的代码/库并使其适用于Firefox，我想出了简单的方法：
方法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)。
例如：
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));

或者您可以将它们设置为常量。由您决定。我看到只有2行代码 - 都在updateMatrix方法中。如果svg有某些边距、边框等，这种方法可能会出现问题。

方法2：

如我上面提到的关于getBoundingClientRect的错误，现在已经在Firefox中修复了，您可以按以下方式使用它：

例如，

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);

或者将它们设置为常量。再次强调，这是您的选择。

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

这里有一个示例，通过使用不同的方法记录不同浏览器的尺寸来澄清问题：

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>

我无法将您的库作为分支进行复制，但我已经使用上述方法在Firefox控制台中进行了检查，并且这些方法都可以正常工作（顺便说一下，在fiddle中我使用了第三种方法）。如果您遇到任何问题，请告诉我。希望这可以帮助到您。

第二种方法解决了我的问题。我没有预料到最后找到了问题。谢谢！ - Michael W. Czechowski
当然，很高兴能帮忙！ :) - Shashank
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接