代码之家 › 专栏 › 技术社区 › Michael W. Czechowski

<g> 元素不适合Firefox上的<svg>

svg d3.js firefox angular javascript

Michael W. Czechowski · 技术社区 · 8 年前

使用ES6'ish D3js模块运行Angular 6应用程序会导致Firefox出现问题( 铬、铬、Safari和IE边缘处理良好 生产代码可以在下面找到 ):

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

<g> 组不能设置为 <svg> width 和 height <svg>

技术栈:

角度6(字体)
D3J系列
SVG格式

运行代码示例

它只在Firefox中运行良好,如果您手动将dimenson放入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>

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

浏览器示例

铬68.0.3440.75

Firefox Quantum 61.0.1(64位)中的结果

该组缩小为随机的宽度和高度。

如何适应 < 元素到相应的 < 元素?

外部示例

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

1 回复 | 直到 7 年前

Shashank 7 年前

获得正确的尺寸 <svg>

无论如何,我只是搜索了SVG的相关维度问题,发现了这个Firefox错误: https://bugzilla.mozilla.org/show_bug.cgi?id=874811

又指 W3C docs (通过评论)清楚地陈述了以下内容:

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

另一个主要的错误 尺寸问题相似 为Firefox提出 getBoundingClientRect 用于输出0(与 clientHeight/clientWidth )但这是固定的: https://bugzilla.mozilla.org/show_bug.cgi?id=530985

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

当你添加CSS时 width:100% 和 height:100% <svg> 的父级,可以替换 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));

或者可以将它们设置为常量。你的选择。我看到只有两行-都在方法。如果 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>

我无法将你的lib复制为fork,但我确实使用了上述方法在Firefox控制台中进行了检查,这些方法确实工作得很好(我在fiddle btw中使用了第三种方法)。如果你有任何问题,请告诉我。希望这有帮助。