SVG：巨大的路徑與許多行標籤

我正在繪製一個網格，它可以很容易地由600多條垂直和水平線組成。SVG：巨大的路徑與許多行標籤

現在我正在用單獨的標記生成/繪製每個網格。

如果我使用巨大的路徑語句生成行，我能期待更好的性能嗎？這樣的事情：

<path class="vertical half notLoaded" d="M -4256.849999999999 0 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00"></path>

我看不出我的核心i7與體面grafik卡的差異。這種設置會降低性能設置嗎？

來源

2014-11-17 AyKarsi

我不認爲600條直線會造成任何系統闖入了一身汗。你在這裏最大的瓶頸可能只是網絡帶寬，所以我只是把整個網格放在一個''元素中，並試圖使'd'屬性稍微冗長一點（即，刪除每一個「.00」擺脫所有的空間，除非他們分開兩位數字）。 –

我實際上使用javascript在客戶端上生成元素。所以帶寬不會是問題。 – AyKarsi

但是，在客戶端性能方面，有多個簡單的路徑和一條複雜的路徑之間有什麼區別？ – ManishKG

SVG的<pattern>的示例。打600多行。用十字線畫一個盒子，用它來平鋪fill

編輯：十字線是可選的。這只是美學。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="1000" height="1000" viewBox="0 0 1000 1000" 
 
\t xml:space="preserve"> 
 
    <defs> 
 
    <pattern id="squarePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="0 0 20 20" > 
 
     <rect id="box" x="0" y="0" width="20" height="20" fill="none" stroke="#6185af" stroke-width="1" /> 
 
     <path d="M0,10 L20,10 M10,0 L10,20" stroke="#330066" stroke-width="1" /> 
 
    </pattern> 
 
    </defs> 
 
    <rect id="gridlines" x="0" y="0" width="1000" height="1000" fill="url(#squarePattern)" /> 
 
</svg>

來源

2014-11-17 22:35:41

SVG：巨大的路徑與許多行標籤

回答

相關問題