D3.js 如何解决SVG路径屏蔽问题，当应用屏蔽时，路径的太多部分被切断

我有一个“源”、“目标”和一个从源指向目标的“聚光灯”。聚光灯是一个三角形遮罩，位于一条从源指向目标的非常非常粗的线的顶部

在我的实际项目中，我有许多光源、目标和聚光灯，但我已将问题简化为一个指向一个静态目标的移动光源，以便于寻求帮助

function svg(whichone, x, y) {
    let svgid = '#svg' + whichone,
         // Sorry, no getting around pasting this massive thing...
         blobd = "M489.6108513752572,207.11284015473436L489.4560294659143,206.9252152620039C489.30120755657146,206.73759036927336,488.99156373788566,206.36234058381243,488.60876325021906,205.58436508858713C488.2259627625524,204.8063895933618,487.77000560590477,203.6256883883722,487.53814428083814,202.43576304448177C487.30628295577145,201.24583770059135,487.2985174622857,200.0466882178002,487.4753050845048,198.83780557999933C487.6520927067238,197.62892294219844,488.01343344464766,196.4103071493879,488.4001166790572,195.42843725138627C488.7867999134667,194.4465673533846,489.19882564436193,193.70144335019185,489.5453871410477,193.08186110615307C489.8919486377334,192.46227886211432,490.1730459002095,191.96823837722957,490.7544062595619,191.09078512981716C491.3357666189143,190.21333188240473,492.2173900751429,188.95246587246461,492.8629693907238,188.02079535449502C493.5085487063048,187.08912483652543,493.91808388123815,186.4866498105263,494.3375744423906,185.84475101145395C494.7570650035429,185.20285221238169,495.1865109509143,184.52152964023617,495.6640036014667,183.5268463021932C496.14149625201907,182.5321629641502,496.66703560575235,181.22411886020973,496.99924042579045,179.9032473462372C497.33144524582855,178.5823758322647,497.47031553217147,177.24867690826008,497.40718583283814,175.90139490796335C497.3440561335048,174.55411290766668,497.0789264484952,173.19324783107797,496.63195568902864,171.81798706991256C496.18498492956195,170.4427263087472,495.5561730956381,169.05306986300525,495.141810144419,168.19565798406748C494.7274471932,167.33824610512968,494.52753312468576,167.01307879299608,494.0608920729048,166.30297918050618C493.5942510211239,165.5928795680163,492.8608829860762,164.49784765517012,492.07475503925724,163.27798753005956C491.28862709243816,162.05812740494903,490.44973923384765,160.7134390675741,489.9960870379429,159.9871222682472C489.5424348420381,159.26080546892032,489.47401830881904,159.1528602076415,489.14064121819996,158.3553297160253C488.80726412758094,157.55779922440908,488.20892647956185,156.07068350245552,487.85584660613335,154.56521566185057C487.50276673270474,153.05974782124562,487.3949446338667,151.53592786198928,487.56689027001903,149.99254700962464C487.73883590617146,148.44916615726,488.19054927731423,146.88622441178703,488.5778374173524,145.8545335814745C488.9651255573904,144.82284275116197,489.28798846632384,144.3224028360099,489.91628471140956,143.52005249962178C490.5445809564953,142.71770216323367,491.4783105377333,141.6134414056095,492.26443848455233,140.80502784793575C493.0505664313714,139.996614290262,493.6890927437715,139.48404793253863,494.79448384679046,138.8539183938318C495.8998749498096,138.22378885512498,497.4721308434476,137.4760961354347,499.04438673280947,136.95355273301087C500.6166426221714,136.43100933058705,502.1888985072571,136.13361524542967,503.761154396619,135.9767626493178C505.33341028598096,135.81991005320592,506.905666179619,135.80359894613957,508.4779220732571,135.82025242706987C510.0501779668952,135.83690590800018,511.62243386053325,135.88652397692712,512.9165219815047,135.8488339118953C514.2106101024762,135.81114384686342,515.226530450781,135.68614564787276,516.0126583976,135.57603974211614C516.7987863444191,135.46593383635948,517.3551218897524,135.37072022383688,518.4194176092382,134.74471589739423C519.4837133287239,134.1187115709516,521.0559692223619,132.96191653058892,521.9951495139334,132.1609467199919C522.9343298055047,131.35997690939482,523.2404344950095,130.9148323285634,523.8950921373142,129.81803720655554C524.549749779619,128.7212420845477,525.5529603747237,126.9727964213635,526.1860359767905,125.89881105856631C526.8191115788571,124.82482569576912,527.0820521878858,124.42530063335899,527.6871636765428,123.5235081058853C528.2922751652001,122.62171557841161,529.2395575334857,121.21765558587434,530.0256854760286,120.19699114320576C530.8118134185714,119.17632670053716,531.4367869353714,118.53905780773722,532.5354016405905,117.66893805573754C533.6340163458095,116.79881830373785,535.2062722394476,115.6958476925384,536.150326785219,115.08298823169652C537.0943813309905,114.47012877085467,537.4102345288953,114.34738046037042,538.1963624757144,114.0768080262402C538.9824904225334,113.80623559211001,540.2388931182667,113.38783903433387,541.6532224129523,113.09537076587522C543.067551707638,112.80290249741658,544.6398076012762,112.63636251827545,546.2120634949143,112.61224951964807C547.7843193885524,112.58813652102073,549.3565752821904,112.70645050290717,550.9288311758286,112.92661413998724C552.5010870694667,113.14677777706727,554.0733429631047,113.46879106934091,555.1508909731809,113.70210234685634C556.2284389832571,113.93541362437175,556.8112791097715,114.08002288712896,557.5974070523142,114.27653244415835C558.3835349948571,114.47304200118772,559.3729507534285,114.72145185248932,560.6537865795333,114.98809431542468C561.934622405638,115.25473677836,563.5068782992761,115.5396118529291,565.0791341929142,115.72350011679096C566.6513900865524,115.90738838065282,568.2236459801903,115.99028983380744,569.7959018738285,115.99576066255129C571.3681577674666,116.00123149129514,572.9404136611047,115.92927169562824,574.5126695547428,115.84491552500155C576.084925448381,115.76055935437489,577.657181342019,115.66380680878844,579.2294372356572,115.61963727531504C580.8016931292954,115.57546774184162,582.3739490229335,115.58388122048122,583.9462049122953,115.69739747962039C585.5184608016573,115.81091373875957,587.090716686743,116.02953277839832,588.6629725761048,116.40346913433363C590.2352284654668,116.7774054902689,591.8074843591047,117.30665916250075,593.1580542768571,117.90089979171744C594.5086241946095,118.4951404209341,595.6375081364762,119.15436800713559,596.4236360832953,119.63517765343336C597.2097640301143,120.11598729973115,597.6531359818856,120.41837900612519,598.6599038457714,121.32017153359891C599.6666717096572,122.22196406107258,601.2368354856571,123.72315740962593,602.0229634324761,124.47510780086206C602.8090913792952,125.22705819209818,602.8111834969333,125.22976562601711,603.4235604299143,126.10398845760922C604.0359373628953,126.97821128920134,605.258599111219,128.72394951846664,606.0447270580381,129.98760092062153C606.8308550048572,131.25125232277642,607.1804491501715,132.03281689782088,607.5714651789906,132.88139351467927C607.9624812078096,133.7299701315376,608.3949191201333,134.64555879020986,608.8345405064857,135.92802531939654C609.2741618928382,137.2104918485832,609.7209667532192,138.8598362482843,610.0338799418859,140.48685878452295C610.3467931305524,142.1138813207616,610.5258146475048,143.7185819935378,610.6277130765144,145.30240320266242C610.7296115055238,146.88622441178703,610.7543868465906,148.44916615726,610.7476428452096,149.99254700962464C610.7408988438287,151.53592786198928,610.7026355000002,153.05974782124562,610.6528540489714,154.56521566185054C610.6030725979429,156.07068350245552,610.5417730397143,157.55779922440908,610.4552189163047,159.02767388471275C610.3686647928952,160.49754854501643,610.2568561043047,161.9501821436702,610.0782833649904,163.38659855548696C609.8997106256761,164.82301496730372,609.6543738356381,166.24321419228352,609.2882841102381,167.64814202764438C608.9221943848381,169.05306986300525,608.4353517240762,170.4427263087472,608.1221860990572,171.26108246219437C607.8090204740382,172.0794386156415,607.669531884762,172.32649447679375,607.3266711144953,173.0069270150881C606.9838103442286,173.6873595533825,606.4375773929714,174.80116876881894,605.6916086433048,176.0249228385395C604.945639893638,177.24867690826008,603.999935345562,178.5823758322647,603.4869238743714,179.2972881947285C602.9739124031811,180.01220055719236,602.8935940088762,180.1083263581154,602.3918298893333,180.7623484100856C601.8900657697906,181.41637046205582,600.9668559250096,182.62828876507322,600.1807279781905,183.6334068946769C599.3946000313714,184.6385250242806,598.7455539825143,185.43684298047052,598.2307167447619,186.07874177954284C597.7158795070095,186.72064057861516,597.3352510803619,187.2061202205699,596.6658822694952,188.07929304651725C595.9965134586286,188.95246587246461,595.0384042635429,190.21333188240473,594.4425905300477,191.00520592713477C593.8467767965525,191.79707997186483,593.6132585246477,192.11996205138485,593.1173658113333,192.7395442954236C592.621473098019,193.35912653946238,591.8632059432952,194.27540894801987,591.0770779964761,195.17598699268603C590.2909500496572,196.0765650373522,589.4769613107429,196.96143871812706,588.8348638233906,197.57074661453234C588.1927663360383,198.1800545109376,587.7225601002477,198.51379662297327,586.9364321577049,199.0147322866279C586.150304215162,199.51566795028248,585.0482545658668,200.183797165556,583.7111017944002,200.72498480630097C582.3739490229335,201.26617244704593,580.8016931292954,201.68041851326242,579.404376970581,201.94592864702125C578.0070608118667,202.2114387807801,576.7846843880761,202.32821298208134,575.9985564412572,202.40362872259922C575.2124284944381,202.4790444631171,574.8625490245904,202.51310174285163,573.9014813428475,202.59136637554604C572.9404136611047,202.66963100824046,571.3681577674666,202.79210299389476,569.7959018738285,202.9662909502825C568.2236459801903,203.1404789066703,566.6513900865524,203.36638283379156,565.0791341929142,203.64736636341243C563.5068782992761,203.92834989303333,561.934622405638,204.26441302515386,560.3623665162761,204.58867110090966C558.7901106269142,204.91292917666541,557.2178547418285,205.22538219605644,555.6455988524666,205.4318486861571C554.0733429631047,205.63831517625775,552.5010870694667,205.73879513706802,550.9288311758286,205.6732352194946C549.3565752821904,205.60767530192118,547.7843193885524,205.37607550596408,546.2120634949142,204.99567017250527C544.6398076012762,204.61526483904643,543.067551707638,204.08605396808593,541.8027075467809,203.63613921364853C540.5378633859237,203.1862244592111,539.5804309578476,202.81560582129683,538.7943030110285,202.53429690910642C538.0081750642096,202.25298799691606,537.3933515986477,202.06098881044954,536.2998119190476,201.8190199103766C535.2062722394476,201.57705101030365,533.6340163458095,201.2851123966242,532.0617604564476,201.16803717811686C530.4895045670856,201.05096195960957,528.9172486819999,201.10875013627424,527.394423377962,201.35071903634721C525.8715980739238,201.59268793642016,524.3982033509334,202.01883755990136,523.6120754041143,202.24899684074543C522.8259474572952,202.47915612158945,522.7270862866477,202.51332505979641,521.8915277545049,202.98509925704502C521.0559692223619,203.45687345429363,519.4837133287239,204.36625291058394,518.5233307910477,204.9395190439753C517.5629482533715,205.51278517736668,517.2144390716571,205.74993798785906,516.4283111248382,206.25924476774995C515.6421831780191,206.76855154764084,514.4184364660952,207.5500122969302,513.4396472076286,208.1316183333211C512.4608579491619,208.71322436971204,511.7270261441524,209.09497569320445,510.94089819733335,209.4731574987721C510.1547702505143,209.85133930433975,509.31634616188575,210.22595159198264,508.1110061707523,210.60077868520963C506.905666179619,210.9756057784366,505.33341028598096,211.3506476772477,503.7611543966191,211.54178213301086C502.1888985072571,211.73291658877397,500.6166426221714,211.7401436014891,499.04438673280947,211.54061670247242C497.4721308434476,211.34108980345573,495.8998749498096,210.93480899270722,494.79314112725723,210.55636839312265C493.6864073047048,210.1779277935381,493.0451955532382,209.82732740511747,492.2590676064192,209.25804606724674C491.47293965960006,208.68876472937606,490.54189551742866,207.9008024420552,490.07637344634287,207.50682129839478L489.6108513752572,207.11284015473436",
         lightd = 'L499.0443867370857,211.74737061420427L546.2120634949142,112.46982253913428L';

    let svg = d3.select('body')
    .append('svg')
    .attr('id', 'svg' + whichone)
    .attr("width", 700)
    .attr("height", 365);

    let border = svg.append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', d3.select(svgid).attr('width'))
    .attr('height', d3.select(svgid).attr('height'))
    .attr('stroke', 'red')
    .attr('fill', 'none');

    let clippy = d3.select(svgid)
    .append('mask')
    .attr('id', 'clippyBoi' + whichone);

    clippy.append('path')
        .attr('class', 'mask-Spotlight-pt1')
        .attr('d', 'M' + x + ',' + y + lightd + x + ',' + y)
        .attr('stroke', 'white')
        .attr('fill', 'white');

    clippy.append('path')
        .attr('class', 'mask-Spotlight-pt2')
        .attr('d', blobd)
        .attr('stroke', 'white')
        .attr('fill', 'white');

    svg.append('path')
        .attr('class', 'Target')
        .attr('d', blobd)
        .attr('stroke', 'blue')
        .attr('fill', 'blue');

    svg.append('path')
        .attr('d', 'M' + x + ',' + y + 'L847.2378366701346,48.24435029368803')
        .attr('stroke-width', 580)
        .attr('stroke-opacity', 0.5)
        .attr('stroke', 'black')
        .attr('mask', 'url(#clippyBoi' + whichone + ')');

    svg.append('circle')
        .attr('class', 'Source')
        .attr('cx', x)
        .attr('cy', y)
        .attr('r', 10)
        .attr('fill', 'blue');

    svg.append('circle')
        .attr('class', 'Spotlight-Endpoint')
        .attr('cx', 499.0443867370857)
        .attr('cy', 211.74737061420427)
        .attr('r', 3)
        .attr('fill', 'red')

    svg.append('circle')
        .attr('class', 'Spotlight-Endpoint')
        .attr('cx', 546.2120634949142)
        .attr('cy', 112.46982253913428)
        .attr('r', 3)
        .attr('fill', 'red')

}

// Now let's make a couple of examples with the Source at different heights.
svg('1', 245.1862903196939, 176.69529478458054);
svg('2', 216.59826693715638, 264.39370748299325);

这里也是

当源在与目标相同的y轴范围内启动时（如在第一个SVG中），遮罩将进入超速档，过多的路径被切断

但是，当源作为目标从y轴范围之外开始时（如在第二个SVG中），掩码工作正常

---

有没有人知道a）是什么导致了超速档问题，b）如何解决？请？

看来有个问题。不过，从笔划改为遮罩

似乎还可以

svg.append('rect')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('fill-opacity', 0.5)
    .attr('fill', 'black')
    .attr('mask', 'url(#clippyBoi' + whichone + ')');

函数svg（whichone，x，y）{
设svgid='#svg'+whichone，
//对不起，不能到处粘贴这个巨大的东西。。。
blobd="M489.6108513752572207.11284015473436L489.4560294659143206.9252152620039C489.3012075557146206.73759036927336488.9915637788566206.36234058381243488.60876325021906205.58436508813C488.22596276225524204.80638933618487.77000560477203.625683883722487.53814483280814202.435730444887.3065745747.2825770574722857200.0466882178002487.4753050845048198.8378055799933c487.6520927067238197.628922942219844488.013434344464766196.4103071493879488.4001166790571195.42843725138627C488.78699134667194.4465673533846489.19882564436193.70144335019185489.5453871410477193.081861106150789.899.8919486377373324890.227846829090917722957494990.754406259561911.09078512981716C491.3357666189143190.2133188240473492.217390751429188.95246587461492.8629693907238188.0207935449502C493.5085487063048187.08912483652543493.918083123815186.4866498105263494.3375744423906185.844751011453C494.757035429185.2028522269495.18651494036014667183.5268463021932C496.14149625201907182.53216296461502496.667035605752355181.22411886020973496.99924042579045179.90324734672372C497.33144524582855178.5823758322647497.47031553217177.248676990826008497.40718528381814175.90139496335C497.3440561335048174.55411290766668497.0726444851974.193894171.81798706991256C496.18498492956195170.4427263087472495.5561730956381169.05306986300525495.141810144419168.19565798406748C494.7274471932167.33824610512968494.52753312468576167.013078799299608494.060892079048166.30297918050618C493.5942510239165.59287956803492.86029860762164.497865512457292.7575920579469.28862709243816162.05812740494903490.44973923384765160.7134390675741489.9960870379429159.98712226824472C489.5424348420381159.2608054692022489.47401830881904159.1528602076415489.140641219996158.3553297160253C488.80726412758094157.557722440908488.208926479561855656.0706835024587.85584635357270767.5674774153.05974782124562487.3949446338667151.53592786198928487.56689027001903149.9925470962464C487.73883590617146148.44916626488.19054927731423146.88622441178703488.5778374173524145.8545335814745C488.96512573904144.82284275116197489.28798846632384144.3224060099489.9162846143.052479454545454545C488.82828287454545454545457489.32240286009948923367491.4783105377333141.6134414056095492.264438484555233140.805027784793575c493.05056664313714139.996614290262493.68909274715139.48404793253863494.79448384679046138.85391838318C495.89987498096138.22378885512498497.472130847676137.47609613543479.04438673280947136.95355273330100878736.8539838383838383838484849046383838389898418.28383838383838518.43783838383838383838902.41872571136.13365124542967503.7611543966619135.9767626493178C505.3334102859096135.819910053205922506.905666179619135.803598944613957508.4779220732571135.82025242706987C510.0501777668952135.83690509800018511.6224338605325135.8865239792712512.91189C514.2101024762135.8184335151515353515.2267845787276516.0126583976135.57603974211614C516.7987863444191135.46593383635948517.3551212897524135.3707202383688518.4194176092382134.744715897739423C519.48371332877239134.118711570956521.0559692223619132.961916530558892521.99514951399334132.1609467199919C522.9343298055047131.3599909382523.24043955130.285392142129.81803720655554C524.549749779619128.7212420845477525.5529603747237126.9727964213635526.1860359767905125.89881105856631C526.8191115788571+
"124.82482569576912527.08205271878858124.42530063335899527.6871636765428123.5235081058853C528.29227516522.62171557841161529.239555753348577121.2176558587434530.025685760286120.19699114320576C530.81181341857119.17632670537118.539057807722532.53535454905117.66895575757380785535.2062722394476115.6958476925384536.1503267852219115.08298823169652C537.094381330905114.47012877085467467537.410234528953114.34738046037042538.1963624757144114.0768080262402C538.9824904225334113.806235592101540.2388931182667113.387839034333541.65322224129523113.0953713.09707676587522C525313.7551712.7551712.75517076809082974162，112.63636251827545546.2120634949143112.61224951964807C547.7843193885524112.58813652102073549.356575282190412.70645050290717550.9288311758286112.92661413998724C552.5010870694667113.1467777777770727554.07334294631047113.4687910693401555.1508909731809113.702102346856356C556.22843892571113.9354737151287128.812771896557.5974070523142114.27653244115835C558.3835349948571114.47304200118772559.3729507534285114.7