為什么這種在SVG元素中畫線的方法在反應中不起作用？

我創建了以下代碼，目的是在一百點之間畫一條線：

<svg width={"100"} height={"100"} className='svg' stroke='#000'>
        <line strokeWidth={1}
          x1={xDataSet[1]} x2={xDataSet[2]} x3={xDataSet[2]} x4={xDataSet[3]} x5={xDataSet[4]} x6={xDataSet[5]} x7={xDataSet[6]} x8={xDataSet[7]} x9={xDataSet[8]} x10={xDataSet[9]}
          x11={xDataSet[10]} x12={xDataSet[11]} x13={xDataSet[12]} x14={xDataSet[13]} x15={xDataSet[14]} x16={xDataSet[15]} x17={xDataSet[16]} x18={xDataSet[17]} x19={xDataSet[18]} x20={xDataSet[19]}
          x21={xDataSet[20]} x22={xDataSet[21]} x23={xDataSet[22]} x24={xDataSet[23]} x25={xDataSet[24]} x26={xDataSet[25]} x27={xDataSet[26]} x28={xDataSet[27]} x29={xDataSet[28]} x30={xDataSet[29]}
          x31={xDataSet[30]} x32={xDataSet[31]} x33={xDataSet[32]} x34={xDataSet[33]} x35={xDataSet[34]} x36={xDataSet[35]} x37={xDataSet[36]} x38={xDataSet[37]} x39={xDataSet[38]} x40={xDataSet[39]}
          x41={xDataSet[40]} x42={xDataSet[41]} x43={xDataSet[42]} x44={xDataSet[43]} x45={xDataSet[44]} x46={xDataSet[45]} x47={xDataSet[46]} x48={xDataSet[47]} x49={xDataSet[48]} x50={xDataSet[49]}
          x51={xDataSet[50]} x52={xDataSet[51]} x53={xDataSet[52]} x54={xDataSet[53]} x55={xDataSet[54]} x56={xDataSet[55]} x57={xDataSet[56]} x58={xDataSet[57]} x59={xDataSet[58]} x60={xDataSet[59]}
          x61={xDataSet[60]} x62={xDataSet[61]} x63={xDataSet[62]} x64={xDataSet[63]} x65={xDataSet[64]} x66={xDataSet[65]} x67={xDataSet[66]} x68={xDataSet[67]} x69={xDataSet[68]} x70={xDataSet[69]}
          x71={xDataSet[70]} x72={xDataSet[71]} x73={xDataSet[72]} x74={xDataSet[73]} x75={xDataSet[74]} x76={xDataSet[75]} x77={xDataSet[76]} x78={xDataSet[77]} x79={xDataSet[78]} x80={xDataSet[79]}
          x81={xDataSet[80]} x82={xDataSet[81]} x83={xDataSet[82]} x84={xDataSet[83]} x85={xDataSet[84]} x86={xDataSet[85]} x87={xDataSet[86]} x88={xDataSet[87]} x89={xDataSet[88]} x90={xDataSet[89]}
          x91={xDataSet[90]} x92={xDataSet[91]} x93={xDataSet[92]} x94={xDataSet[93]} x95={xDataSet[94]} x96={xDataSet[95]} x97={xDataSet[96]} x98={xDataSet[97]} x99={xDataSet[98]} x100={xDataSet[99]}

          y1={yDataSet[1]} y2={yDataSet[2]} y3={xDataSet[2]} y4={xDataSet[3]} y5={xDataSet[4]} y6={xDataSet[5]} y7={xDataSet[6]} y8={xDataSet[7]} y9={xDataSet[8]} y10={xDataSet[9]}
          y11={yDataSet[10]} y12={yDataSet[11]} y13={yDataSet[12]} y14={yDataSet[13]} y15={yDataSet[14]} y16={yDataSet[15]} y17={yDataSet[16]} y18={yDataSet[17]} y19={yDataSet[18]} y20={yDataSet[19]}
          y21={yDataSet[20]} y22={yDataSet[21]} y23={yDataSet[22]} y24={yDataSet[23]} y25={yDataSet[24]} y26={yDataSet[25]} y27={yDataSet[26]} y28={yDataSet[27]} y29={yDataSet[28]} y30={yDataSet[29]}
          y31={yDataSet[30]} y32={yDataSet[31]} y33={yDataSet[32]} y34={yDataSet[33]} y35={yDataSet[34]} y36={yDataSet[35]} y37={yDataSet[36]} y38={yDataSet[37]} y39={yDataSet[38]} y40={yDataSet[39]}
          y41={yDataSet[40]} y42={yDataSet[41]} y43={yDataSet[42]} y44={yDataSet[43]} y45={yDataSet[44]} y46={yDataSet[45]} y47={yDataSet[46]} y48={yDataSet[47]} y49={yDataSet[48]} y50={yDataSet[49]}
          y51={yDataSet[50]} y52={yDataSet[51]} y53={yDataSet[52]} y54={yDataSet[53]} y55={yDataSet[54]} y56={yDataSet[55]} y57={yDataSet[56]} y58={yDataSet[57]} y59={yDataSet[58]} y60={yDataSet[59]}
          y61={yDataSet[60]} y62={yDataSet[61]} y63={yDataSet[62]} y64={yDataSet[63]} y65={yDataSet[64]} y66={yDataSet[65]} y67={yDataSet[66]} y68={yDataSet[67]} y69={yDataSet[68]} y70={yDataSet[69]}
          y71={yDataSet[70]} y72={yDataSet[71]} y73={yDataSet[72]} y74={yDataSet[73]} y75={yDataSet[74]} y76={yDataSet[75]} y77={yDataSet[76]} y78={yDataSet[77]} y79={yDataSet[78]} y80={yDataSet[79]}
          y81={yDataSet[80]} y82={yDataSet[81]} y83={yDataSet[82]} y84={yDataSet[83]} y85={yDataSet[84]} y86={yDataSet[85]} y87={yDataSet[86]} y88={yDataSet[87]} y89={yDataSet[88]} y90={yDataSet[89]}
          y91={yDataSet[90]} y92={yDataSet[91]} y93={yDataSet[92]} y94={yDataSet[93]} y95={yDataSet[94]} y96={yDataSet[95]} y97={yDataSet[96]} y98={yDataSet[97]} y99={yDataSet[98]} y100={yDataSet[99]}
        />
      </svg>

顯然，這不起作用有幾個原因。為了給您提示問題可能是什么，這里有一些背景關系：

• 程式不會崩潰。相反，它完美地加載了所有內容，除了沒有線
• 問題不在于資料集是空的或類似的。兩個資料集都包含數百個字串形式的數字（例如，“10”）。

旁注：如果有更有效的方法來做到這一點，我也想對此提出一些想法，lmao。

提前致謝。

uj5u.com熱心網友回復：

所述線元件具有四個坐標屬性- ，，和-表示用于兩個軸的線的起點和終點。x1x2y1y2

您提供的所有其他x*和y*屬性都將被忽略。

您似乎正在嘗試使用它來繪制多邊形。

uj5u.com熱心網友回復：

如果您的目標是繪制復雜的線條（例如“之字形線”）——<polyline>將是最合適的元素。

svg {
  display:inline-block;
  width:10vw;
  overflow:visible
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="0,0 50,50 100,0 150, 50" fill="none" stroke="#000" stroke-width="10" />
</svg>

<!--closed shape – since polygon will automatically close a shape -->
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 50,50 100,0 150, 50" fill="none" stroke="#000" stroke-width="10" />
</svg>

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M0, 0 L50, 50 L100,0 L150, 50" fill="none" stroke="#000" stroke-width="10" />
</svg>

<!--closed shape – caused by Z(closepath) command -->
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M0, 0 L50, 50 L100,0 L150, 50z" fill="none" stroke="#000" stroke-width="10" />
</svg>

正如@Quentin 指出的那樣，<line>只能顯示單個直線段。

如果你真的想畫一個“實心”的封閉形狀（例如應該有一個顏色填充）——多邊形是要走的路。

根據您在應用程式中的進一步使用，您也可以考慮使用path元素。

標籤：

上一篇：如何使用css在SVG中設定我的影像？

下一篇：如何在axios獲取的物件陣列中搜索一個id？Vue2