我面临着一个奇怪的挑战。我的挑战是在 svg map 路径中容纳 700 多张小图像。我尝试过很多不同的想法，但每次都失败了。
我的目标:
我在做什么:
.big-map {
background: url(img/map.svg) no-repeat;
height: 360px;
width: 100%;
position: relative;
}
.map-flex {
background: rgba(200, 20, 20, 0.5);
height: 149px;
width: 333px;
transform: rotateZ(23deg);
position: absolute;
top: 32px;
left: 64px;
transform-origin: left top;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
}
.big-map img {
width: 16px;
}<div class="big-map">
<div class="map-flex">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
<img src="img/a.jpg">
</div>
</div>我的 map.svg 包含:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-191 305.6 389.5 182.4" style="enable-background:new -191 305.6 389.5 182.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#231F20;stroke-miterlimit:10;}
</style>
<g class="group">
<path class="st0" d="M196.6,473.1c-0.3,0-0.6,0.1-0.8,0.1c0.2,5.1-0.2,8-3,11.2c-0.3,0.1-0.5,0.2-0.8,0.3c-1.6-1-2.9-2.2-4.8-3.1
c0-0.7-0.5-1.7-1.3-2.4c-0.1,0.1-0.2,0.2-0.3,0.4c-1.2,0.7-0.7,1.6-2.2,2.1c-0.8-0.6-1-1.1-2.2-1.3c-0.2,1.1-0.4,1.9-0.7,3
c-1.9,0-2.2-0.6-4.2-0.7c0,1.8-2.1,2.8-4.1,3c-3-3.4-9.7-2.8-10.4,2.5c-2,0.2-2.4-0.4-4.3-0.4c-0.2-1.2-0.5-1.5-1.1-2.1
c-0.1,0-0.1,0-0.2,0c-1.3,0.5-2.9,1-4.7,0.8c-2.9-1.6-4-4.5-4.5-8.9c-1.4,0.5-1.1,2.4-2.2,3.3c-1.2,0.4-2.4,0.7-3.6,1.1
c0,0.4,0,0.8,0,1.2c-0.4,0-0.9,0.1-1.3,0.1c0,0.8-0.1,1.3-0.5,1.8c-1.8,1.2-3.2,1.4-5.4,0.8c-0.4,1.2-0.6,1.8-2.3,2
c-0.9-1.8-5-2.2-6.9-2.8c-0.6-0.7-1.3-1.4-1.9-2.2c-0.7,0-1.4-0.1-2.1-0.1c-2.5-0.7-5.4-2.1-7.6-3.1c-1.3,0.2-2.6,0.4-3.8,0.6
c-0.3,0.9-0.4,1.2-1.7,1.4c-0.5-0.2-0.8-0.9-1.1-1.1c-0.8,0.1-1.7,0.3-2.5,0.4c-3-1-4.6-3-8.1-1c-0.5,2.2-2.7,3.2-4.1,4.7
c-0.4,0-0.8,0-1.2,0c0-1.2,0.2-1.2-0.4-2c-1.2,0.4-4.6-0.9-5.3-1.8c-1.6-2.3-0.6-5.6-1.4-8.3c-1.6-0.9-3.6-1.6-5.1-2.7
c-0.1,0.1-0.2,0.1-0.3,0.2c-0.2,0.4-0.4,0.8-0.5,1.2c-0.8,0-0.7-0.1-1.2-0.4c-0.7,2.5-4.3,4.3-7.2,4.3c-1,1-2.1,1.9-3.1,2.9
c-2.1,0-3.8-0.6-6.5-0.3c-1-2.1-1-2.8-1.3-5.5c-3.5,0.4-4.2,1.4-7.3,1.8c0-0.6,0-1.1,0-1.7c0.3-0.1,0.5-0.2,0.8-0.3
c-0.8,0-1.6-0.1-2.4-0.1c0-0.3-0.1-0.7-0.1-1c-0.5,0.1-1,0.1-1.5,0.2c0-0.2,0-0.3-0.1-0.5c0.1-0.4,0.1-0.8,0.2-1.2
c-1.4-0.7-3.6-0.3-5.2-1.1c-1-0.5-0.8-1.5-2.2-1.8c-0.3,0.8-0.4,1-1.6,1.2c-0.1-0.1-6-1.6-6.8-1.6c0.2-1.9,1.2-3,1.3-4.9
c0.3-3.1-0.4-4.8-1.8-6.8c-4.6-7-11.7-1.5-18.5-4.5c-0.2-1.7-0.7-1.8-1.5-2.7c-0.7,0.2-1.3,0.5-2,0.7c-0.1-0.5-0.1-1-0.2-1.5
c-1.5,0.1-1.8-0.4-3-0.7c0.1-0.5,0.1-1,0.2-1.5c-1,0.4-1.3,0.5-2.2,0.1c0.1,1.8-1.1,2.9-1.7,4.3c-2.2,0.5-8.5,0.1-9.9,1.6
c0.8,0.8,1.5,1.5,2.3,2.3c-0.2,0.6-0.3,1.2-0.5,1.8c-0.2,0-0.4,0-0.7,0.1c-5.8-4.1-12.3-4.9-22.1-4.2c0.6,0.9,0.4,1.3-0.1,2.1
c0.4,0.4,0.8,0.7,1.1,1.1c-0.4,1.7-1.5,3.2-2.4,4.5c-0.9,0.2-1.8,0.3-2.7,0.5c-1.5-2.4-3.6-4.2-5.7-5.8c-3.3,0.3-6.6,0.6-9.9,0.9
c-1.1-0.2-1.3-1.4-2.2-1.8c-2.1-0.5-6.5,1.7-8,0.3c0-0.1,0-0.2,0-0.3c-1.1-1.8-0.4-3.1-0.8-4.2c-1-2.6-2.1-3.5-2.7-6.2
c-3.1,0.8-9.4,3.7-12.4,3c-1.7-0.4-2.5-2.1-3.9-2.8c-2.7-1.5-5.5-3.2-8.1-4.4c-1.2-0.6-2.6,0.1-3.8-0.6c-0.9-0.9-1.9-1.8-2.8-2.8
c-1.4,0.1-2.8,0.2-4.2,0.3c-0.6,1.3-1.2,2.6-1.8,3.9c-0.6,0-1.2,0-1.9,0c-3.3-1.1-6.8-4.9-9.3-5.8c-0.9,0-1.8,0.1-2.7,0.1
c-1.6-0.9-3.3-1.8-4.9-2.7c-1-0.2-2.1-0.5-3.1-0.7c-0.1-0.8-0.2-1.6-0.3-2.4c-1.2-0.5-1.5-1.9-2.6-2.3c-0.9,0-1.8,0.1-2.7,0.1
c-2.1-0.2-4-1.6-5.2-2.8c-1.4-1.5-2.1-5.8-4.1-6.5c-1.1,0-2.2,0-3.2,0c-1.9-0.3-2.9-0.9-4.6-0.3c-0.5-1.3-0.6-1.8-1.2-2.9
c-0.6,0.5-0.7,0.9-1.7,1.2c-0.6-1-1.8-1.2-3.2-1.2c-0.2-0.9-0.3-1.4-0.6-2c-0.3-0.1-0.6-0.2-0.9-0.2c-0.5,0.5-0.6,0.8-1.6,1
c-0.6-0.8-1.6-1.5-2.9-1.6c-0.2-0.9,0-0.7-0.6-1c-0.8-1.4-2-1-3.7-1.1c-0.6-1.5-1.3-1.7-1.9-3c-1.8,0.3-2.7,0-3.8-0.4
c-0.2-0.5-0.3-1.1-0.5-1.6c-0.5,0-1,0-1.5,0c-0.5,0.5-1,0.9-1.6,1.4c0.4,1.7,1.9,4.3,1.4,5.5c0,0.1,0,0.2,0,0.3
c-0.2,0-0.4,0-0.7,0.1c-1.2-1.3-2.4-2.4-3.6-3.9c-1.2,0.2-2.6,0.9-3.5,0.4c-1.2-0.5-2.5-1.4-2.7-3.1c-0.8-0.1-1.6-0.2-2.4-0.2
c-0.2-0.3-0.4-0.5-0.6-0.8c0.1-0.7,0.2-0.8,0-1.5c-4.1,0.5-4.2-2.2-6.8-3c-0.9-0.3-1.9,0.2-2.6-0.1c-1.4-4-0.8-6.6,1.8-8.5
c0.1-1.6-0.5-4.3,0.2-6.1c0.3-0.8,1.1-0.9,1.3-2c0.9,0.2,1.9,0.5,2.8,0.7c0.3-0.6,0.6-0.9,1.4-1.2c-0.7-1.2-1.4-2.4-1.6-4.1
c1.1,0,1.6,0.4,2.3,0.9c0-2,0.4-4,0.5-6c-1.9-0.5-2.3-1.7-2.5-3.8c-0.8-0.1-1.4-0.4-1.8-1c0.4-0.6,0.1-1.4,0.6-1.9
c0.8-0.6,0.8-0.5,1.8-0.4c0-0.1,0-0.1,0-0.2c-0.2-0.3-0.4-0.6-0.6-1c1-1,1.9-2,2.9-3c-0.4-0.6-0.5-0.5-0.5-1.3
c2.1-1.1,3.1-2.9,2.6-5.4c-0.9-0.1-3.7-3.2-2.7-5c0.1-0.3,2.5-3,3.2-3.4c0.8,0.1,1.6,0.2,2.4,0.2c0.5-1.6,1.7-1.7,2.6-2.8
c1.4-1.8-0.1-4.8,1.9-6.1c1.1-0.7,1.5-0.1,3-0.2c1-1.7,2.7-2.1,3.4-3.3c0.9-1.6,0.7-3.5,2.2-4.7c1.1-0.8,2.4-1.1,2.8-2.3
c-0.3-0.6-0.6-1.2-0.9-1.8c0.9-0.6,1.3-1.8,1.7-2.7c0.3,0.1,0.7,0.2,1,0.2c0.1,0.7,0.1,0.8,0.5,1.1c2,0.7,4.4-2,6.5-1
c0.7,0.8,1.3,1.6,2,2.3c-0.1,1-0.8,2.1-0.2,3.2c0.6,0.8,1.4,0.5,2.3,0.9c4,1.9,6.2,1.1,4.9-4.8c1.1-0.4,3-0.5,3.9-1.3
c0.5-1.9,1.9-4.7,2.1-7c0.1-1.2-1-1.9-1.3-2.6c-1.7-3.6,1.4-4.4,4.4-4.7c1.2,1.5,2,2.2,4.3,2.3c-0.3-1.5-0.5-2.4,0.3-3.3
c0.7,0.1,1.2-0.5,2.4-0.3c1.8,0.7,3.5,1.3,5.3,2c3.9,0.8,7.7,0.3,11,1.2c2.5,0.7,6.3-1.5,8.3,0.1c-0.4,5.9,1.8,3.7,3.1,7
c0.9,2.1-0.8,3.3-0.2,4.6c3.7,0.4,7.7,1.9,11.2,2.9c1.5,0.4,2.6-0.2,3.6,0.3c0.7,1.5,3.7,1.4,4.9,2.9c0.2,0.4,0.3,0.9,0.5,1.3
c1.8,1.3,3.7,2.7,5.5,4c0.9,1,1.2,2.9,2.4,3.5c0.9,0.1,1.8,0.3,2.8,0.4c0.5,0.5,0.9,1,1.4,1.6c1.1-0.1,2.1-0.2,3.2-0.3
c2.7,0.6,5.5,2.4,8,3.2c1.1-0.1,2.1-0.1,3.2-0.2c0.2,0.4,0.4,0.7,0.6,1.1c1.5,0.9,3.2-0.7,4.6,1.2c0.1,0.8,0.3,1.7,0.4,2.5
c1.3,0.3,2.9,0.1,3.7,1.1c0.4,0.8,0,1.4,0.4,2c1,0.6,2,1.3,2.9,1.9c1.4,1.6,1.7,4.5,3,6.1c0.6,0.2,1.2,0.3,1.8,0.5
c2.1,1.1,4.5,6.2,7.9,4.2c0.3-1.5,2.2-4.1,4.3-4c0.8,0,1.6,0.1,2.4,0.1c0.9-0.4,0.8-1.6,1.3-2.3c1.4-2.2,6-2.6,8.3-2.3
c0,0.4,0.1,0.9,0.1,1.3c0.2,0.1,0.5,0.2,0.7,0.3c2.3-1.9,3.9,0.6,5.8,1.4c1.2,0.5,2-0.3,2.8,0.7c0.1,0.1,0.1,0.1,0.2,0.1
c-0.2,1-1,1-1.2,1.8c0.1,1.5,0.1,3,0.2,4.6c-0.6,0.9-1.2,1.8-1.7,2.7c0.9,0.9,1.8,1.7,2.7,2.6c0.1,1.7-1.3,4.2-0.3,5.5
c1.9-0.6,3.5-1.8,5.6-2c1.1,2.6,5.5,1.9,7.9,3.9c0.2,1.9-0.2,2.7-0.4,4.3c1.8-0.9,2.3,0.5,4.1,0.6c4,0.2,4-2.7,8.1-0.7
c0.5,2.7,1.5,2.2,1.3,5.3c2.3-0.1,6.1,0.3,7.8,1.2c2.5-1.8,2.8-2.2,6.2-2.2c1.2-2.3,2.5-4.3,6.1-4.7c1.1,1,2.1,1.9,3.2,2.9
c-0.1,3.3-1,6.2-1.7,9.2c-0.2,1.9-0.4,3.9-0.6,5.8c1.5,0.9,2.9-0.3,4.3-0.8c0.8,0.9,1.6,1.9,2.3,2.8c1.4-0.4,2.9-0.9,4.3-1.3
c0.5,0.1,0.8,0.6,1.8,0.7c4.1-7.5,12.6,0.7,16.8,2.6c0.5-0.3,1.1-0.6,1.6-0.9c2.3,1.6,4.5,3.1,6.8,4.7c0.6,1.4,1.2,2.8,1.8,4.2
c0.6,0.7,1.3,1.4,1.9,2.2c0.5,1.3-0.4,1.6-0.1,2.4c2.6,0.1,5.5,1.7,7.2-1c-1.4-2.8-3.1-3.9-2.9-8.3c2-0.9,2.5-3.7,4.3-3.9
c0.7,1.6,1.4,2.2,2.2,3.3c-0.4,1.6-0.6,2.1,0.1,4.1c1.2,3.4,2.7,0.9,5.6,1.8c0.9,0.3,0.7,1.1,1.8,1.3c0.9-0.7,2.7-2.3,3.3-0.5
c-0.7,0.8-1.1,1.2-0.6,2.1c2.9-0.9,1.4-1.7,4.8-1c0.1-0.2,0.2-0.5,0.3-0.7c-0.6-0.7-1.2-1.3-1.7-2c0.1-2,2.2-5.2,3.6-6
c2.2-0.6,2.4,0.2,3.9-1.6c1.4-0.2,2.1-0.3,3.2,0c0.1,1,0.4,2.1,1,2.6c0.6,0.4,1.8,0.9,2.7,1.4c0.7-0.4,1-0.7,2.1-0.9
c1.3,1,3.7,3.4,5.5,3.5c0.9-0.2,1.9-0.3,2.8-0.5c1.2,0.3,5.2,3.4,6.4,4.2c-0.2,0.6-0.4,1.2-0.7,1.8c1.6-0.1,3.2-0.1,4.7-0.2
c0.7-0.4,0.7-1.5,2.2-1.4c1,0.1,2,0.2,2.9,0.4c1.2-0.4,1.9-1.7,3.8-1.4c0.1,0.8,0,0.9,0.3,1.2c2.5,0.7,4.6-2.4,6.8-2.9
c0.1,0.1,0.1,0.1,0.2,0.1c0.1,1.3,0.2,2.3,1,2.8c1.2-0.9,4.6-3.8,5.3-0.9c0.4-0.4,0.8-0.8,1.2-1.2c0.7,0.4,1.1,0.8,2.1,1
c0.1-0.8,0.2-1,0.7-1.4c1.3,0.2,2.1,0.1,2.7,1.2c0.8-0.3,1.6-0.5,2.5-0.8c0.6-2.2,1.4-4,3-5.4c2.8-0.2,2.8,1.1,4.5,1.9
c1.1,0.2,1.6-0.1,2.1-0.7c1.1,0.5,2.1,0.9,3.2,1.4c0,0.3,0.1,0.6,0.1,0.8c-0.3,0.3-0.6,0.6-0.9,0.9c0.3,0.6,0.6,1.3,0.9,1.9
c-0.9,0.7-4.7,14-5.4,15.9c0.8,1,1.4,1.6,1.6,3.4c-1.1,0.6-0.9,1.4-1.1,2.7c0.6,0.5,0.9,0.7,1.2,1.7c-1.6,3.5-1.7,8-2.1,11.8
c1.4,0.9,0.9,1.7,2,3c0.7,0.9,1.9,0.1,2.8,0.7c1.1,0.7,1,1.6,2.4,2.1c-0.1,2.6,1.1,3.7,2.6,5.5c0.2,0.3,1.2,4.1,1.4,4.8
C199.4,466.2,196.3,469.3,196.6,473.1z"></path></g>
</svg>非常感谢任何帮助。
更新:
正如 Paul LeBeau 在回答中提到的，我尝试了以下方法:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.fillStyle = '#000';
ctx.scale(1.8453456, 2.0702263);
var p = new Path2D("m 390,170 c -0.3,0 -0.6,0.1 -0.8,0.1 0.2,5.1 -0.2,8 -3,11.2 -0.3,0.1 -0.5,0.2 -0.8,0.3 -1.6,-1 -2.9,-2.2 -4.8,-3.1 0,-0.7 -0.5,-1.7 -1.3,-2.4 -0.1,0.1 -0.2,0.2 -0.3,0.4 -1.2,0.7 -0.7,1.6 -2.2,2.1 -0.8,-0.6 -1,-1.1 -2.2,-1.3 -0.2,1.1 -0.4,1.9 -0.7,3 -1.9,0 -2.2,-0.6 -4.2,-0.7 0,1.8 -2.1,2.8 -4.1,3 -3,-3.4 -9.7,-2.8 -10.4,2.5 -2,0.2 -2.4,-0.4 -4.3,-0.4 -0.2,-1.2 -0.5,-1.5 -1.1,-2.1 -0.1,0 -0.1,0 -0.2,0 -1.3,0.5 -2.9,1 -4.7,0.8 -2.9,-1.6 -4,-4.5 -4.5,-8.9 -1.4,0.5 -1.1,2.4 -2.2,3.3 -1.2,0.4 -2.4,0.7 -3.6,1.1 0,0.4 0,0.8 0,1.2 -0.4,0 -0.9,0.1 -1.3,0.1 0,0.8 -0.1,1.3 -0.5,1.8 -1.8,1.2 -3.2,1.4 -5.4,0.8 -0.4,1.2 -0.6,1.8 -2.3,2 -0.9,-1.8 -5,-2.2 -6.9,-2.8 -0.6,-0.7 -1.3,-1.4 -1.9,-2.2 -0.7,0 -1.4,-0.1 -2.1,-0.1 -2.5,-0.7 -5.4,-2.1 -7.6,-3.1 -1.3,0.2 -2.6,0.4 -3.8,0.6 -0.3,0.9 -0.4,1.2 -1.7,1.4 -0.5,-0.2 -0.8,-0.9 -1.1,-1.1 -0.8,0.1 -1.7,0.3 -2.5,0.4 -3,-1 -4.6,-3 -8.1,-1 -0.5,2.2 -2.7,3.2 -4.1,4.7 -0.4,0 -0.8,0 -1.2,0 0,-1.2 0.2,-1.2 -0.4,-2 -1.2,0.4 -4.6,-0.9 -5.3,-1.8 -1.6,-2.3 -0.6,-5.6 -1.4,-8.3 -1.6,-0.9 -3.6,-1.6 -5.1,-2.7 -0.1,0.1 -0.2,0.1 -0.3,0.2 -0.2,0.4 -0.4,0.8 -0.5,1.2 -0.8,0 -0.7,-0.1 -1.2,-0.4 -0.7,2.5 -4.3,4.3 -7.2,4.3 -1,1 -2.1,1.9 -3.1,2.9 -2.1,0 -3.8,-0.6 -6.5,-0.3 -1,-2.1 -1,-2.8 -1.3,-5.5 -3.5,0.4 -4.2,1.4 -7.3,1.8 0,-0.6 0,-1.1 0,-1.7 0.3,-0.1 0.5,-0.2 0.8,-0.3 -0.8,0 -1.6,-0.1 -2.4,-0.1 0,-0.3 -0.1,-0.7 -0.1,-1 -0.5,0.1 -1,0.1 -1.5,0.2 0,-0.2 0,-0.3 -0.1,-0.5 0.1,-0.4 0.1,-0.8 0.2,-1.2 -1.4,-0.7 -3.6,-0.3 -5.2,-1.1 -1,-0.5 -0.8,-1.5 -2.2,-1.8 -0.3,0.8 -0.4,1 -1.6,1.2 -0.1,-0.1 -6,-1.6 -6.8,-1.6 0.2,-1.9 1.2,-3 1.3,-4.9 0.3,-3.1 -0.4,-4.8 -1.8,-6.8 -4.6,-7 -11.7,-1.5 -18.5,-4.5 -0.2,-1.7 -0.7,-1.8 -1.5,-2.7 -0.7,0.2 -1.3,0.5 -2,0.7 -0.1,-0.5 -0.1,-1 -0.2,-1.5 -1.5,0.1 -1.8,-0.4 -3,-0.7 0.1,-0.5 0.1,-1 0.2,-1.5 -1,0.4 -1.3,0.5 -2.2,0.1 0.1,1.8 -1.1,2.9 -1.7,4.3 -2.2,0.5 -8.5,0.1 -9.9,1.6 0.8,0.8 1.5,1.5 2.3,2.3 -0.2,0.6 -0.3,1.2 -0.5,1.8 -0.2,0 -0.4,0 -0.7,0.1 -5.8,-4.1 -12.3,-4.9 -22.1,-4.2 0.6,0.9 0.4,1.3 -0.1,2.1 0.4,0.4 0.8,0.7 1.1,1.1 -0.4,1.7 -1.5,3.2 -2.4,4.5 -0.9,0.2 -1.8,0.3 -2.7,0.5 -1.5,-2.4 -3.6,-4.2 -5.7,-5.8 -3.3,0.3 -6.6,0.6 -9.9,0.9 -1.1,-0.2 -1.3,-1.4 -2.2,-1.8 -2.1,-0.5 -6.5,1.7 -8,0.3 0,-0.1 0,-0.2 0,-0.3 -1.1,-1.8 -0.4,-3.1 -0.8,-4.2 -1,-2.6 -2.1,-3.5 -2.7,-6.2 -3.1,0.8 -9.4,3.7 -12.4,3 -1.7,-0.4 -2.5,-2.1 -3.9,-2.8 -2.7,-1.5 -5.5,-3.2 -8.1,-4.4 -1.2,-0.6 -2.6,0.1 -3.8,-0.6 -0.9,-0.9 -1.9,-1.8 -2.8,-2.8 -1.4,0.1 -2.8,0.2 -4.2,0.3 -0.6,1.3 -1.2,2.6 -1.8,3.9 -0.6,0 -1.2,0 -1.9,0 -3.3,-1.1 -6.8,-4.9 -9.3,-5.8 -0.9,0 -1.8,0.1 -2.7,0.1 -1.6,-0.9 -3.3,-1.8 -4.9,-2.7 -1,-0.2 -2.1,-0.5 -3.1,-0.7 -0.1,-0.8 -0.2,-1.6 -0.3,-2.4 -1.2,-0.5 -1.5,-1.9 -2.6,-2.3 -0.9,0 -1.8,0.1 -2.7,0.1 -2.1,-0.2 -4,-1.6 -5.2,-2.8 -1.4,-1.5 -2.1,-5.8 -4.1,-6.5 -1.1,0 -2.2,0 -3.2,0 -1.9,-0.3 -2.9,-0.9 -4.6,-0.3 -0.5,-1.3 -0.6,-1.8 -1.2,-2.9 -0.6,0.5 -0.7,0.9 -1.7,1.2 -0.6,-1 -1.8,-1.2 -3.2,-1.2 -0.2,-0.9 -0.3,-1.4 -0.6,-2 -0.3,-0.1 -0.6,-0.2 -0.9,-0.2 -0.5,0.5 -0.6,0.8 -1.6,1 -0.6,-0.8 -1.6,-1.5 -2.9,-1.6 -0.2,-0.9 0,-0.7 -0.6,-1 -0.8,-1.4 -2,-1 -3.7,-1.1 -0.6,-1.5 -1.3,-1.7 -1.9,-3 -1.8,0.3 -2.7,0 -3.8,-0.4 -0.2,-0.5 -0.3,-1.1 -0.5,-1.6 -0.5,0 -1,0 -1.5,0 -0.5,0.5 -1,0.9 -1.6,1.4 0.4,1.7 1.9,4.3 1.4,5.5 0,0.1 0,0.2 0,0.3 -0.2,0 -0.4,0 -0.7,0.1 -1.2,-1.3 -2.4,-2.4 -3.6,-3.9 -1.2,0.2 -2.6,0.9 -3.5,0.4 -1.2,-0.5 -2.5,-1.4 -2.7,-3.1 -0.8,-0.1 -1.6,-0.2 -2.4,-0.2 -0.2,-0.3 -0.4,-0.5 -0.6,-0.8 0.1,-0.7 0.2,-0.8 0,-1.5 -4.1,0.5 -4.2,-2.2 -6.8,-3 -0.9,-0.3 -1.9,0.2 -2.6,-0.1 -1.4,-4 -0.8,-6.6 1.8,-8.5 0.1,-1.6 -0.5,-4.3 0.2,-6.1 0.3,-0.8 1.1,-0.9 1.3,-2 0.9,0.2 1.9,0.5 2.8,0.7 0.3,-0.6 0.6,-0.9 1.4,-1.2 -0.7,-1.2 -1.4,-2.4 -1.6,-4.1 1.1,0 1.6,0.4 2.3,0.9 0,-2 0.4,-4 0.5,-6 -1.9,-0.5 -2.3,-1.7 -2.5,-3.8 -0.8,-0.1 -1.4,-0.4 -1.8,-1 0.4,-0.6 0.1,-1.4 0.6,-1.9 0.8,-0.6 0.8,-0.5 1.8,-0.4 0,-0.1 0,-0.1 0,-0.2 -0.2,-0.3 -0.4,-0.6 -0.6,-1 1,-1 1.9,-2 2.9,-3 -0.4,-0.6 -0.5,-0.5 -0.5,-1.3 2.1,-1.1 3.1,-2.9 2.6,-5.4 -0.9,-0.1 -3.7,-3.2 -2.7,-5 0.1,-0.3 2.5,-3 3.2,-3.4 0.8,0.1 1.6,0.2 2.4,0.2 0.5,-1.6 1.7,-1.7 2.6,-2.8 1.4,-1.8 -0.1,-4.8 1.9,-6.1 1.1,-0.7 1.5,-0.1 3,-0.2 1,-1.7 2.7,-2.1 3.4,-3.3 0.9,-1.6 0.7,-3.5 2.2,-4.7 1.1,-0.8 2.4,-1.1 2.8,-2.3 -0.3,-0.6 -0.6,-1.2 -0.9,-1.8 0.9,-0.6 1.3,-1.8 1.7,-2.7 0.3,0.1 0.7,0.2 1,0.2 0.1,0.7 0.1,0.8 0.5,1.1 2,0.7 4.4,-2 6.5,-1 0.7,0.8 1.3,1.6 2,2.3 -0.1,1 -0.8,2.1 -0.2,3.2 0.6,0.8 1.4,0.5 2.3,0.9 4,1.9 6.2,1.1 4.9,-4.8 1.1,-0.4 3,-0.5 3.9,-1.3 0.5,-1.9 1.9,-4.7 2.1,-7 0.1,-1.2 -1,-1.9 -1.3,-2.6 -1.7,-3.6 1.4,-4.4 4.4,-4.7 1.2,1.5 2,2.2 4.3,2.3 -0.3,-1.5 -0.5,-2.4 0.3,-3.3 0.7,0.1 1.2,-0.5 2.4,-0.3 1.8,0.7 3.5,1.3 5.3,2 3.9,0.8 7.7,0.3 11,1.2 2.5,0.7 6.3,-1.5 8.3,0.1 -0.4,5.9 1.8,3.7 3.1,7 0.9,2.1 -0.8,3.3 -0.2,4.6 3.7,0.4 7.7,1.9 11.2,2.9 1.5,0.4 2.6,-0.2 3.6,0.3 0.7,1.5 3.7,1.4 4.9,2.9 0.2,0.4 0.3,0.9 0.5,1.3 1.8,1.3 3.7,2.7 5.5,4 0.9,1 1.2,2.9 2.4,3.5 0.9,0.1 1.8,0.3 2.8,0.4 0.5,0.5 0.9,1 1.4,1.6 1.1,-0.1 2.1,-0.2 3.2,-0.3 2.7,0.6 5.5,2.4 8,3.2 1.1,-0.1 2.1,-0.1 3.2,-0.2 0.2,0.4 0.4,0.7 0.6,1.1 1.5,0.9 3.2,-0.7 4.6,1.2 0.1,0.8 0.3,1.7 0.4,2.5 1.3,0.3 2.9,0.1 3.7,1.1 0.4,0.8 0,1.4 0.4,2 1,0.6 2,1.3 2.9,1.9 1.4,1.6 1.7,4.5 3,6.1 0.6,0.2 1.2,0.3 1.8,0.5 2.1,1.1 4.5,6.2 7.9,4.2 0.3,-1.5 2.2,-4.1 4.3,-4 0.8,0 1.6,0.1 2.4,0.1 0.9,-0.4 0.8,-1.6 1.3,-2.3 1.4,-2.2 6,-2.6 8.3,-2.3 0,0.4 0.1,0.9 0.1,1.3 0.2,0.1 0.5,0.2 0.7,0.3 2.3,-1.9 3.9,0.6 5.8,1.4 1.2,0.5 2,-0.3 2.8,0.7 0.1,0.1 0.1,0.1 0.2,0.1 -0.2,1 -1,1 -1.2,1.8 0.1,1.5 0.1,3 0.2,4.6 -0.6,0.9 -1.2,1.8 -1.7,2.7 0.9,0.9 1.8,1.7 2.7,2.6 0.1,1.7 -1.3,4.2 -0.3,5.5 1.9,-0.6 3.5,-1.8 5.6,-2 1.1,2.6 5.5,1.9 7.9,3.9 0.2,1.9 -0.2,2.7 -0.4,4.3 1.8,-0.9 2.3,0.5 4.1,0.6 4,0.2 4,-2.7 8.1,-0.7 0.5,2.7 1.5,2.2 1.3,5.3 2.3,-0.1 6.1,0.3 7.8,1.2 2.5,-1.8 2.8,-2.2 6.2,-2.2 1.2,-2.3 2.5,-4.3 6.1,-4.7 1.1,1 2.1,1.9 3.2,2.9 -0.1,3.3 -1,6.2 -1.7,9.2 -0.2,1.9 -0.4,3.9 -0.6,5.8 1.5,0.9 2.9,-0.3 4.3,-0.8 0.8,0.9 1.6,1.9 2.3,2.8 1.4,-0.4 2.9,-0.9 4.3,-1.3 0.5,0.1 0.8,0.6 1.8,0.7 4.1,-7.5 12.6,0.7 16.8,2.6 0.5,-0.3 1.1,-0.6 1.6,-0.9 2.3,1.6 4.5,3.1 6.8,4.7 0.6,1.4 1.2,2.8 1.8,4.2 0.6,0.7 1.3,1.4 1.9,2.2 0.5,1.3 -0.4,1.6 -0.1,2.4 2.6,0.1 5.5,1.7 7.2,-1 -1.4,-2.8 -3.1,-3.9 -2.9,-8.3 2,-0.9 2.5,-3.7 4.3,-3.9 0.7,1.6 1.4,2.2 2.2,3.3 -0.4,1.6 -0.6,2.1 0.1,4.1 1.2,3.4 2.7,0.9 5.6,1.8 0.9,0.3 0.7,1.1 1.8,1.3 0.9,-0.7 2.7,-2.3 3.3,-0.5 -0.7,0.8 -1.1,1.2 -0.6,2.1 2.9,-0.9 1.4,-1.7 4.8,-1 0.1,-0.2 0.2,-0.5 0.3,-0.7 -0.6,-0.7 -1.2,-1.3 -1.7,-2 0.1,-2 2.2,-5.2 3.6,-6 2.2,-0.6 2.4,0.2 3.9,-1.6 1.4,-0.2 2.1,-0.3 3.2,0 0.1,1 0.4,2.1 1,2.6 0.6,0.4 1.8,0.9 2.7,1.4 0.7,-0.4 1,-0.7 2.1,-0.9 1.3,1 3.7,3.4 5.5,3.5 0.9,-0.2 1.9,-0.3 2.8,-0.5 1.2,0.3 5.2,3.4 6.4,4.2 -0.2,0.6 -0.4,1.2 -0.7,1.8 1.6,-0.1 3.2,-0.1 4.7,-0.2 0.7,-0.4 0.7,-1.5 2.2,-1.4 1,0.1 2,0.2 2.9,0.4 1.2,-0.4 1.9,-1.7 3.8,-1.4 0.1,0.8 0,0.9 0.3,1.2 2.5,0.7 4.6,-2.4 6.8,-2.9 0.1,0.1 0.1,0.1 0.2,0.1 0.1,1.3 0.2,2.3 1,2.8 1.2,-0.9 4.6,-3.8 5.3,-0.9 0.4,-0.4 0.8,-0.8 1.2,-1.2 0.7,0.4 1.1,0.8 2.1,1 0.1,-0.8 0.2,-1 0.7,-1.4 1.3,0.2 2.1,0.1 2.7,1.2 0.8,-0.3 1.6,-0.5 2.5,-0.8 0.6,-2.2 1.4,-4 3,-5.4 2.8,-0.2 2.8,1.1 4.5,1.9 1.1,0.2 1.6,-0.1 2.1,-0.7 1.1,0.5 2.1,0.9 3.2,1.4 0,0.3 0.1,0.6 0.1,0.8 -0.3,0.3 -0.6,0.6 -0.9,0.9 0.3,0.6 0.6,1.3 0.9,1.9 -0.9,0.7 -4.7,14 -5.4,15.9 0.8,1 1.4,1.6 1.6,3.4 -1.1,0.6 -0.9,1.4 -1.1,2.7 0.6,0.5 0.9,0.7 1.2,1.7 -1.6,3.5 -1.7,8 -2.1,11.8 1.4,0.9 0.9,1.7 2,3 0.7,0.9 1.9,0.1 2.8,0.7 1.1,0.7 1,1.6 2.4,2.1 -0.1,2.6 1.1,3.7 2.6,5.5 0.2,0.3 1.2,4.1 1.4,4.8 2,4.2 -1.1,7.3 -0.8,11.1 z");
ctx.stroke(p);
ctx.fill(p);
ctx.fillStyle = '#FFF';
var getPt = function() {
var x = Math.random() * 730,
y = Math.random() * 390;
if (!ctx.isPointInPath(p, x, y)) {
return getPt();
} else {
return {
"x": x,
"y": y
};
}
};
for (j = 0; j < 700; j++) {
var pt = getPt();
ctx.fillRect(pt.x, pt.y, 1, 1);
};body {
background: rebeccapurple;
}<canvas id='canvas' height='390px' width='730px'></canvas>不过，我们仍然可以看到在路径之外绘制的许多点。请检查。
注意:Path2D 仍未得到所有浏览器的完全支持，如果它在您的浏览器中出现问题，请使用最新的 Chrome 进行测试。对于部署，您可以使用 Canvas5 Polyfill
最佳答案
Canvas 有一个 isPointInPath()功能。一种可能的方法:
- 创建 Canvas
- 在 Canvas 上定义您的 map 路径
使用类似下面的内容放置您的图像。
for each image to place: while (not foundpointinpath) x = random value between 0 & width y = random value between 0 & height) foundpointinpath = canvas.isPointInPath(path, x, y) draw image with random rotation at (x,y)
关于jquery - 将小图像包裹在 svg map 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35693543/