Question

我正在绘制一个网格，它可以很容易地由600多条垂直和水平线组成。

现在我正在使用单独的标签生成/绘制每个网格。

如果我使用巨大的路径语句生成行，我可以期待更好的性能吗？像这样：

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

我无法通过一张体面的grafik卡看到我的核心i7的差异。较低的性能设置会从这种设置中受益吗？

Answer 1

SVG的<pattern>示例。击败600多行。画一个带十字准线的方框，用fill

平铺

编辑：十字准线是可选的。这只是美学。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000" height="1000" viewBox="0 0 1000 1000" 
	 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>

＆＃13;

SVG：巨大的路径与许多行标签

1 个答案: