用映像填充数百个SVG路径会导致严重的性能问题

Question

I'm creating hexagonal tiles using SVG like that:

<style>
    .tile:hover {
        fill: red;
    }
</style>

<svg width="1000" height="1000">
    <g>
        <path
            d="M-17.32050807568877,-10L0,-20L17.32050807568877,-10L17.32050807568877,10.000000000000002L0,20.000000000000004L-17.32050807568877,10.000000000000002"
            class="tile"></path>

            ...
    </g>
</svg>

I have about 400 tiles on the screen. You can check how it looks here: https://337706.playcode.io/ Try to hover over some tiles. Hovered tiles should become red, and there is no performance issues. There is also no issue if I fill all of the tiles with color:

<style>
    .tile {
        fill: green;
    }
</style>

I'd like to fill the tiles with an image, so I have created a pattern:

<defs>
    <pattern patternUnits="objectBoundingBox" id="grass" width="70" height="80">
        <image href="https://i.ibb.co/9ZZgDhy/tiles.png"></image>
    </pattern>
</defs>

And then, fill tiles with it:

<style>
    .tile {
        fill: url(#grass);
    }

    .tile:hover {
        fill: red;
    }
</style>

After that, the performance drops dramatically. (you can check it here, but bear in mind it may even crash your browser: https://337697.playcode.io/ )

I have checked the profiler on Chrome, it says 98% of the time is spent on "Composite Layers".

I have noticed that the problem is not about the image itself but about the <pattern> because even if I remove the image and place just green rectangle instead, the performance is the same bad. If I remove the pattern and just fill the tile with color, there is no issue...

How can I fill the tiles with image and fix this performance issue? Is there a better way of setting the background image?

Answer 1

It should be quicker using clipped images.

I've created the map using a nested loop to create a bunch of <use> elements. The downside to this method is that you can't do a simple CSS colour change on hover.

 var map = document.getElementById("map"); var SVG_NS = map.namespaceURI; var XLINK_NS = "http://www.w3.org/1999/xlink"; var H_STEP = 34.64; var V_STEP = 30; var y = 0; for (let j=0; j<20; j++) { var xStart = (j % 2) ? (H_STEP / 2) : 0; for (let i=0; i<20; i++) { addUse("grass", xStart + i * H_STEP, j * V_STEP); } } function addUse(defId, x, y) { var use = document.createElementNS(map.namespaceURI, "use"); use.setAttributeNS(XLINK_NS, "xlink:href", "#"+defId); use.setAttribute("x", x); use.setAttribute("y", y); map.appendChild(use); } 

 <svg width="1000" height="1000"> <defs> <clipPath id="hexagon"> <path d="M0,10 L17.32,0 L34.64,10 L34.64,30 L17.32,40 L0,30 Z"/> </clipPath> <image id="grass" href="https://i.ibb.co/9ZZgDhy/tiles.png" width="105" height="80" clip-path="url(#hexagon)"/> </defs> <g id="map"> </g> </svg> 

Answer 2

I think the composite process with that many SVG's filled with a pattern is just asking too much. I'm basing that thought on this write-up . I'm not sure if there is a good way to improve that, but there are other ways to accomplish what you want.

---

Here's an example using css clip-path in place of an SVG.

Note you need to do a bit more work in CSS to correctly position everything.

Each hexagon is a square and all corners land on a quarter or half. That makes the math a bit easier. I'm absolutely positioning each tile and then providing height , width , X ( left:offset ) and Y ( top:offset ) via the Javascript when they're appended.

Here's a Codepen if you want to play with it.

It seems quite performant even with 2500 elements...

 var container = document.getElementById("wrapper"); var totalCols = 10; var totalRows = 15; var stepX = (1/totalCols) * 100; var stepY = stepX * 0.75; for (let r=0; r<totalRows; r++ ){ for(let c=0; c<totalCols; c++){ var offset = (r % 2) ? (stepX * 0.5) : 0; addHexagon(offset + c * stepX, r * stepY); } } function addHexagon (x,y) { var newPos = 'top: ' + y + '%;' + 'left: ' + x + '%;' + 'width: ' + stepX +'%;' + 'height: ' + stepX + '%;' var el = document.createElement('div') el.setAttribute('class', 'el') el.setAttribute('style', newPos); container.appendChild(el); } 

 #wrapper { width:1000px; height: 1000px; background: #333; position: relative; overflow:hidden; } .el { position: absolute; /* set height & width using js */ /* make the hexagon and mask the content */ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* asethetic only */ background-image: url(https://images.unsplash.com/photo-1560146491-308b0f69a52a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80); background-size: cover; background-position: center center; background-repeat: no-repeat; } .el:hover { background-color: blue; background-image: none; } 

 <div id="wrapper"></div>