在svg宽度路径中填充空间

时间:2017-09-21 02:51:34

标签: javascript svg

我正在使用路径创建一个svg,并且我在获取填充svg本身空间的路径时遇到了问题。

这是一个例子 https://jsfiddle.net/k44y4b9L/2/

如您所见,svg viewBox设置为与svg中最后一个点相同的宽度,两者都是1366

根据我的想法,这意味着路径应该占据svg的整个宽度,但它不是。

在我的实际网站中,svg被赋予了窗口的宽度

<svg height="119" width="1366">
<path...

有人可以解释为什么svg路径没有填充所提供的空间以及如何让它这样做吗?

注意,svg是屏幕的整个宽度,它只是不完整的路径。

我通过以下脚本制作svg,但我认为问题不在脚本中,因为路径中的最后一个值等于svg的总宽度

for(let i = 0; i< points.length; i++) {
      track = track + (points[i].distance / totalDistance) * layout.width + ' ' +
        ((maxHeight - points[i].height) / rangeHeight ) * svgHeight + ' L ';

    }
    return {
      track: track = track + layout.width + ' ' + rangeHeight + ' L  0 ' + rangeHeight
    }
  });

2 个答案:

答案 0 :(得分:1)

我怀疑脚本是问题所在。图中的最后一个数据点位于

L 1314.6117266886256 77.66199637121403

在图表向下潜入屏幕之前

L 1366 1535.7468222475618

然后回到

L 0, 1535.7468222475618

所以填充会起作用。目前,情节中的坠落被视口截断,因此它看起来像是垂直的,好像图形在x = 1314处截止,而它没有并继续到x = 1366。这可以通过将视图端口高度更改为数千并删除height标记上的svg属性来演示。

为什么脚本不在1366处绘制数据点尚不清楚 - 我希望points[points.length-1].distance表示的距离与totalDistance相同。或许一些明智的记录可以解决问题。

请注意,在完成路径数据时,rangeHeight可以替换使用未缩放的svgHeight值(与svg维度无关),例如:

return {
      track: track = track + layout.width + ' ' + svgHeight + ' L  0 ' + svgHeight
}

答案 1 :(得分:1)

那是因为你在y轴上切割你的路径。

y值降至1535viewBox停在120。然后,您可以一直向下y:1535,从x~=1320, y=120x:1366, y:1535的对角线隐藏在您的图像中,但仍然是BBox的一部分。

因此,您只需修改viewBox中的y值并添加preserveAspectRatio="none"即可延长路径。

&#13;
&#13;
svg{ border: 1px solid}
&#13;
<svg width="100%" height="119.1" viewbox="0 0 1366 1535.7468222475618" preserveAspectRatio="none"><path fill="blue" d="M 0 93.6895418127642 L 2.665123367659168 94.90951776684683 L 4.2895612672752135 95.15586786527933 L 5.204138083194765 95.52176851940251 L 7.7378161096114955 95.4968606554659 L 11.796534397512328 94.86507944410728 L 14.9873069580359 95.05820497877262 L 16.756067470338387 94.77967748096344 L 18.421891072530475 95.16810832132134 L 19.88958479564756 95.45663219779111 L 22.634942167376725 95.88126715542622 L 26.184890456874864 95.57351845480213 L 28.587916433168083 96.01081520391392 L 31.199511238479634 95.3382488653906 L 33.38809911206268 94.66131221953057 L 36.617723255618394 93.85346911989356 L 37.65906382915835 93.50822794622684 L 43.29465530719694 91.94007945222616 L 45.716759684221024 90.95158454736118 L 46.23418125941004 90.65919298964516 L 49.255795487153705 91.11934266396851 L 53.89271252054174 91.37524000592352 L 59.55509369824439 89.76761365783392 L 74.71239046154567 86.85588402071572 L 76.3156550476323 86.59673916397207 L 77.76213912056488 87.33267957936282 L 79.15299880688353 86.79470361982295 L 80.95990641532082 84.97713718709238 L 82.90222743583448 85.71152051204957 L 87.53337570384602 84.31175142512346 L 115.9785644393456 75.83435851234935 L 132.00356781551105 70.47999085360084 L 133.58937876896545 70.10454286234689 L 133.95732529432212 70.25745852331632 L 136.67945834452576 70.3768657869749 L 138.5576884937648 70.56735065592682 L 139.82273892809195 70.03075226943392 L 142.9898781345473 68.5799541971048 L 145.95202507835424 69.29762420428824 L 150.50894185058112 67.43118085972195 L 154.62159634599612 66.68568032640702 L 169.53919747246763 59.59184397837285 L 172.34408940163092 59.76661681324125 L 179.41323957617433 54.23712395717909 L 183.18452899857706 55.40387210153476 L 184.0517824411765 55.29838465800259 L 198.08060711429832 48.21844941522161 L 201.9903786283023 48.704890678403935 L 202.48752991273093 48.49738248187275 L 204.34662118685745 47.41276016266789 L 205.01124027256498 46.990440798310104 L 205.49659566406584 46.518242556207255 L 206.8418394859621 46.08028132180215 L 210.03951819735218 43.87559690008509 L 212.338584260495 42.21410052551513 L 215.13428901896637 40.00206616499397 L 216.22883500849494 39.271020348363514 L 217.94960418760922 38.15087869545533 L 218.56074500765445 38.19452386431356 L 221.3801994932312 36.592252387318595 L 223.30002523442425 36.93992956021575 L 224.10404241236913 36.791248671214916 L 224.71071496536376 36.47391294902361 L 228.41149727226718 36.85678910758367 L 228.75425359524786 36.894877630415635 L 230.54735298302236 36.25746535877406 L 233.78344097837038 34.139991745198586 L 234.93588064029692 33.38848346925461 L 238.5468723380036 33.624154282406906 L 239.31506808990252 33.60244405886698 L 243.79898809077113 32.684517066199525 L 250.6593160723187 32.676748323928244 L 252.17318560940996 32.304214919317666 L 254.00342960748807 32.59333023011129 L 258.2276619957761 32.72851732000699 L 259.97230778182046 33.099291548809354 L 265.4090892850939 33.75428998833749 L 267.0635669446066 33.73377259828705 L 270.52300329337686 33.192374901844545 L 285.48309832360417 30.122683953308066 L 290.5227384353614 29.85905415149619 L 295.25893355417685 30.958678966322548 L 301.4502335605041 31.136185693487686 L 306.8208117842427 31.57304886360337 L 339.47192403440647 28.060679864829428 L 342.1449661049091 27.794486617474085 L 353.9323391224938 25.37009416334379 L 356.6018605192946 24.82921719693516 L 359.64767048445555 24.181681318588037 L 362.57780656478553 23.755884739419958 L 363.65249511822043 23.3515193287727 L 368.2120398933081 21.942193470917374 L 370.35649976050325 21.69368310986994 L 373.99343835721373 20.80390792873542 L 376.414161449733 20.297356339910245 L 376.787157865503 20.246882130423856 L 377.6205065246026 20.100203758158866 L 380.0060469073525 19.644098789164627 L 382.2442022192896 18.49717114163059 L 383.9720543154379 17.954255448859406 L 384.9379270536342 17.582345963166865 L 387.21871501577016 17.46355040252647 L 398.5817348795498 15.744955757669509 L 403.7694228757952 14.455680750218848 L 407.08599127831803 13.303027478807884 L 410.1646026186511 13.273746609992454 L 429.2129721545638 9.461786592069828 L 447.0134203224187 8.161005374319608 L 448.60778248355723 7.645924358835366 L 468.6327826995717 7.981351456431004 L 475.32330845699545 5.70710018647154 L 483.34724799131357 2.4489215203781627 L 498.8456289249868 5.760337773520393 L 499.67912261812467 5.537475774374966 L 505.7973512825049 7.83719544468438 L 511.9666885977891 4.8031686551094674 L 517.9090181061771 0 L 526.388911295637 3.746907359885273 L 530.0474682624499 5.531335897259933 L 533.6831685801574 6.7096555767811905 L 538.4312447068208 4.437323229797208 L 542.5155236808126 3.5935567127955332 L 548.0622665277615 6.694405957766618 L 555.368489359055 7.413294398771164 L 557.4986740798215 7.816979560350507 L 558.9051301230962 8.424058923225747 L 562.2743827363502 9.91972842233779 L 564.8259341029334 11.289955040436165 L 565.8119813104888 11.926112522978205 L 568.9568656616074 14.030254441031873 L 573.1827172987125 14.828825421693766 L 578.3785767455453 15.334117293663994 L 584.1515464253678 14.064073191170861 L 586.1728574199217 14.122703467730394 L 587.2977423590918 14.251599444958874 L 588.3738791103115 14.600886272848552 L 590.7752256255633 15.337302161105766 L 591.0649543950095 15.414279874259574 L 593.2364141814209 16.467370584845725 L 596.378658509884 18.804552245216243 L 598.6429172973552 20.07477362660744 L 601.1344308324669 20.1395124966016 L 604.9756672147997 19.424378997691218 L 609.6324294777376 19.278439992334462 L 614.1807345210082 18.854040532043992 L 616.177704194166 18.915110878874664 L 622.3401206580357 18.813564909394568 L 624.6527893862285 18.346742657988273 L 625.7190437085152 18.03998714571526 L 629.2447187238298 18.108664956966145 L 632.0310154758156 19.41404894077666 L 634.4641695555704 21.67012042804931 L 635.481932256133 22.393744083780668 L 638.4559888575782 23.080603444933192 L 641.510901615907 25.468831984343865 L 644.6931156109835 27.06003438171469 L 646.700214681451 27.255658620829642 L 648.7975316593405 26.457704119074755 L 650.0947372687093 26.249000064662255 L 654.2635056995479 26.766110291551744 L 658.6312548121922 26.878056186067017 L 660.1225340577158 26.71879173768677 L 663.628713091155 26.455229068371217 L 667.4946606070508 26.163112801685955 L 669.9542581756274 27.303327863722238 L 677.0127917345734 27.13578451581777 L 684.8122456915586 28.020605418766433 L 689.7482589536 27.51562718982995 L 714.3428542269559 28.408487848798977 L 720.6124214544949 31.549115632008036 L 727.2114778228455 35.106569937273385 L 762.1185692296282 46.632774046529136 L 767.2524456752058 48.29894920704799 L 773.5629096514042 49.16365256299842 L 783.0820469695753 52.066317725578976 L 784.0033625779054 52.25121726808711 L 784.6107537596346 51.95598265202461 L 788.0726344863083 52.668067310098444 L 791.5166114383851 52.6930444750226 L 793.3492301858332 52.512724089873835 L 794.5698293956268 52.935715239517755 L 796.2374281679132 52.97432361876515 L 798.9351287733825 53.31397459181399 L 802.5416921350363 55.960507656235045 L 805.5781878322663 56.881157044145716 L 814.3287318917567 56.854790401935716 L 817.0000157817514 58.83045675263215 L 821.5595291296794 60.738787981228306 L 832.9692771556078 65.43466237763657 L 837.5475956866258 66.86841046711476 L 847.7564099756963 67.6362510578752 L 864.5970910744117 67.91874478579993 L 898.6022006693901 78.3141373971703 L 924.1257060529387 81.34734144959816 L 936.115659825146 81.66373244937131 L 952.5395355813768 83.38818295913383 L 966.8920484489237 87.02866001977004 L 985.1491169788279 86.48653833949837 L 991.5416555933199 90.11737233685511 L 1004.3271437352008 92.04441229714145 L 1017.3658624262649 89.70632037960343 L 1023.3508172604021 89.90279816847024 L 1027.4687085173787 91.99284340733254 L 1028.4793059461576 92.05061541340609 L 1028.952486787462 92.09072831613449 L 1031.3174185577661 92.34885505963966 L 1033.4641770257906 93.69325656737531 L 1039.1505247860423 96.64667935969715 L 1043.060166795977 98.41294343913069 L 1046.8703354819286 100.22445436749487 L 1056.7636732583996 99.70763382706583 L 1066.819054032742 97.95914505968518 L 1070.4724832649208 96.66304486664104 L 1077.3502579049352 95.73100889092025 L 1083.694606401379 94.89703781395599 L 1092.3619875058187 95.05023846894626 L 1100.602904117155 91.2927544872155 L 1104.0257739645165 88.54922961637493 L 1116.543854149713 87.01515463815245 L 1127.5402475931287 87.59694953569955 L 1135.6793875687938 85.8789496263917 L 1146.6435673479255 88.70567080072436 L 1156.7145425214592 91.49476558759186 L 1177.0857006728386 104.1 L 1179.8523304540697 103.72101909178603 L 1180.048674351256 103.74069081403994 L 1185.106175192035 102.6473473570614 L 1210.6440269758577 95.52478673869703 L 1219.6809408711752 93.73918640283988 L 1240.518031099135 90.02964304369375 L 1280.3576814932712 82.33568355595172 L 1294.6106145311173 80.6754493779673 L 1314.6117266886256 77.66199637121403 L 1366 1535.7468222475618 L  0 1535.7468222475618"></path></svg>
&#13;
&#13;
&#13;