如何在SVG地图上随机填充圆形标记 [英] How can I randomly populate circle markers on a SVG map
本文介绍了如何在SVG地图上随机填充圆形标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在SVG地图上显示了一个标记.我想在地图上以及地图路径内随机填充标记.请帮助我实现该实现.
I have one marker displayed on an SVG Map. I want to populate the markers randomly on the map and within the path of the map. Kindly help me with this implementation.
svg {
border: 1px solid;
overflow: visible
}
path {
stroke: black;
vector-effect: non-scaling-stroke
}
<svg height=200 width=200 fill="none" viewBox='.6 1.1 1 1'>
<defs>
<symbol id="marker" viewBox="1.4 1.7 16 16">
<g transform="translate(0.0625 0.0475)">
<circle r="2" cx="8" cy="8" stroke="black" stroke-width="0.001" fill="red"/>
</g>
</symbol>
</defs>
<use id="theUse" xlink:href="#marker" width=".15" height=".15" x="1.05" y="1.55" />
<path d='M 1.08583,1.84181 l 0.02003,0.00322 0.003917,-0.008192 0.001098,-0.00409 0.001925,-0.003735 0.003098,-0.007964 0.001112,-0.002924 0.000531,-0.003501 0.001664,-0.004677 0.001465,-0.004257 0.004778,-0.001624 0.004599,0.000546 0.003444,-2.8e-05 0.003444,-2.8e-05 0.003444,-2.8e-05 0.002289,-0.000602 0.005166,-4.2e-05 0.003443,-2.9e-05 0.001701,-0.001762 0.001105,-0.003507 -0.001184,-0.002905 -0.001198,-0.00407 -0.002346,-0.004061 -0.002339,-0.003479 -0.001633,-0.00216 -0.00245,-0.003053 -0.001757,-0.0029 -0.003488,-0.003469 -0.004053,-0.002881 -0.004047,-0.002299 -0.004628,-0.002877 -0.00231,-0.001147 -0.004054,-0.002881 -0.002891,-0.001726 -0.002885,-0.001142 -0.003465,-0.00172 -0.004039,-0.001716 -0.003466,-0.001721 -0.002318,-0.00173 -0.002331,-0.002895 -0.001766,-0.003483 0.000546,-0.002336 -0.000624,-0.004076 0.000538,-0.002918 -5.7e-05,-0.004663 0.001055,-0.007587 -0.000646,-0.005824 0.000516,-0.004667 0.000532,-0.003502 0.002216,-0.00643 0.006286,-0.002384 0.009184,-7.4e-05 0.00518,0.001123 0.005173,0.000541 0.004613,0.001711 0.004585,-0.00062 0.006881,-0.000639 0.005159,-0.000625 0.004003,-0.001199 0.003423,-0.001776 0.004011,-0.000616 0.00226,-0.002933 0.001105,-0.003507 0.001679,-0.003511 0.003968,-0.004113 0.002863,-0.000606 0.003487,0.003469 3.5e-05,0.002915 0.00061,0.002909 0.002892,0.001725 0.003465,0.001721 0.007512,0.004019 0.008079,0.003431 0.009844,0.006915 0.002339,0.003478 0.002346,0.004062 0.001929,0.004325 0.001601,0.002641 0.00635,0.002862 0.004613,0.001712 0.006903,0.001109 0.00805,0.0011 0.002877,0.00056 0.003451,0.000554 0.004606,0.001129 0.00404,0.001716 0.002325,0.002312 0.00175,0.002318 0.001184,0.002905 0.001765,0.003482 0.001758,0.002901 0.007505,0.003436 0.006888,-5.6e-05 0.004011,-0.000616 0.003429,-0.001194 0.059804,-0.085011 0.004557,-0.002951 0.005122,-0.003539 0.007391,-0.00589 0.002841,-0.002355 0.044101,0.019307 0.00433,-0.002215 0.001097,-0.004089 0.004492,-0.008197 -0.00374,-0.003618 -0.005432,-0.002823 -0.001808,-0.001864 -0.003619,-0.002806 -0.004524,-0.002814 -0.007249,-0.001916 -0.003618,-0.002806 -0.003619,-0.002805 -0.004531,-0.000967 -0.002718,-0.00095 -0.003624,-0.000958 -0.003618,-0.002805 -0.002714,-0.001873 -0.00452,-0.004663 -0.000895,-0.003703 -0.003607,-0.006501 -0.003609,-0.005576 -0.004526,-0.002815 -0.00542,-0.006518 -0.006327,-0.006526 -0.001804,-0.002789 -0.001808,-0.001864 -0.003613,-0.004653 -0.004528,-0.001891 -0.003633,0.001814 -0.003636,0.002736 -0.005455,0.004568 -0.00454,0.001804 -0.002729,0.002746 -0.005459,0.005491 -0.004548,0.004576 -0.006363,0.004558 -0.009088,0.006381 -0.004531,-0.000967 -0.005441,-5.1e-05 -0.004537,0.000881 -0.00454,0.001804 -0.005437,-0.000975 -0.002712,-0.002797 -0.001793,-0.006484 2.1e-05,-0.006466 0.000927,-0.006458 0.002743,-0.007364 0.000949,-0.012924 -0.00175,-0.02034 -0.00086,-0.014789 -0.000862,-0.013865 -0.001767,-0.014797 -0.003539,-0.027747 -0.001779,-0.011103 -0.003601,-0.008348 -0.002702,-0.005568 -0.004523,-0.003738 -0.004513,-0.006509 -0.007219,-0.011154 -0.008105,-0.017629 -0.003604,-0.007424 -0.007223,-0.01023 -0.007218,-0.011154 -0.012646,-0.015824 -0.014491,-0.00568 -0.004171,-3.9e-05 -0.004022,0.010123 -0.001832,0.005526 -0.002746,0.008287 -0.002741,0.006441 -0.001828,0.004602 -0.000925,0.005534 -0.000918,0.003686 -0.000925,0.005534 -0.002741,0.006441 -0.005458,0.005491 -0.003645,0.005508 -0.003639,0.00366 -0.00545,0.00272 -0.005446,0.001796 -0.006353,0.001788 -0.007258,0.000855 -0.009989,0.004524 -0.009083,0.004533 -0.004543,0.002729 -0.003648,0.006431 -0.003644,0.005509 -0.004555,0.006423 -0.003644,0.005509 -0.002733,0.003668 -0.001825,0.003679 -0.005464,0.007338 -0.004543,0.002728 -0.004543,0.002729 -0.00272,-2.6e-05 -0.008155,-0.001925 -0.00906,-0.002857 -0.005431,-0.002823 -0.007261,0.001779 -0.009068,-8.6e-05 -0.002712,-0.002797 -0.002702,-0.005568 -0.006336,-0.003755 -0.002729,0.002745 -0.004537,0.000881 -0.002712,-0.002797 -0.005431,-0.002823 -0.005438,-0.000975 -0.004537,0.000881 -0.007276,0.006397 -0.003644,0.005508 -0.004551,0.0055 -0.004547,0.003652 -0.00501,0.001292 -0.013143,0.004079 -0.00817,0.002694 -0.009083,0.004533 -0.006359,0.003635 -0.005455,0.004567 -0.005456,0.004568 -0.005261,0.004939 0.002906,0.002891 0.001772,0.004066 0.00292,0.004056 0.004642,0.004043 0.002328,0.003456 0.000621,0.002932 -0.000538,0.002919 -0.001119,0.00234 -0.001701,0.001763 -0.001679,0.003512 -0.001679,0.003511 -0.001119,0.002341 -0.000538,0.002919 0.001176,0.002321 0.001184,0.002905 -0.000545,0.002337 -0.000481,0.007582 0.001765,0.003483 0.004032,0.001132 0.004032,0.001133 0.005748,0.000536 0.004032,0.001133 0.003458,0.001138 0.0046,0.000545 0.005238,0.001713 0.004548,0.000539 0.002699,-0.000692 0.007066,0.001196 0.004025,0.000549 0.002877,0.00056 0.003451,0.000555 0.003452,0.000554 0.00231,0.001148 0.005819,0.006364 3.6e-05,0.002914 0.000609,0.00291 -0.000545,0.002336 -0.005704,0.002961 -0.002849,0.001772 -0.002246,0.004099 -0.001111,0.002924 3.5e-05,0.002914 5.1e-05,0.00408 0.002346,0.004061 0.001183,0.002905 0.001177,0.002322 -0.001119,0.002341 -0.002849,0.001772 -0.001657,0.00526 0.00061,0.002909 -0.004535,0.004701 -0.001119,0.00234 -0.000524,0.004085 0.002927,0.00464 0.001191,0.003487 0.001192,0.003488 0.000609,0.00291 0.001184,0.002905 0.00175,0.002317 0.002325,0.002313 0.001744,0.001734 0.003465,0.001721 0.002311,0.001147 3.5e-05,0.002914 4.3e-05,0.003497 -0.000545,0.002337 -0.002224,0.005846 -0.005719,0.001796 -0.003429,0.001194 -0.004004,0.001199 -0.005166,4.1e-05 -0.00287,2.4e-05 -0.005589,0.012287 -0.001105,0.003506 -0.001679,0.003512 -0.001672,0.004094 -0.005123,0.003539 0.000681,0.008738 0.002356,0.005182 0.001799,0.00586 5.7e-05,0.004662 0.001191,0.003489 0.005726,-0.001213 0.002855,-0.001189 0.00231,0.001147 0.002318,0.001729 0.001758,0.002901 0.001779,0.004648 0.002332,0.002896 0.002346,0.004061 0.003444,-2.8e-05 0.003444,-2.8e-05 0.004585,-0.00062 0.002289,-0.000602 0.005144,-0.001791 0.007477,0.001105 0.0021,0.000987 0.00887,0.00417 0.004082,0.005213 0.00409,0.005796 0.002331,0.002895 -0.000545,0.002336 0.00178,0.00465 0.000631,0.004657 0.001184,0.002906 0.002339,0.003478 0.004068,0.004047 0.002906,0.002891 0.004621,0.002294 0.002905,0.002891 0.005116,0.002664 0.050227,0.008073 z'></path>
</svg>
推荐答案
在下一个示例中，我将绘制圆形而不是使用符号.您可以根据需要使用符号.
In the next example I will draw circles instead of using a symbol. You can use a symbol if you want.
请阅读代码中的注释.
const SVG_NS = 'http://www.w3.org/2000/svg';
// the number of random points on the map
let circlesLength = 6;
// the bounding box of the path
let bb = thePath.getBBox();
//set the svg viewBox attribute
svg.setAttributeNS(null,"viewBox",`${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
// svg client rect
let cr = svg.getBoundingClientRect();
let n = 0;//a counter
for(let i = 0; i < 100; i++){
// get a random point on the svg canvas
let x = randomIntFromInterval(cr.x,(cr.x+cr.width));
let y = randomIntFromInterval(cr.y,(cr.y+cr.height));
//elementFromPoint returns the topmost Element at the specified coordinates (relative to the viewport).
let elmt = document.elementFromPoint(x, y);
// if the point is in path
if(elmt.className.baseVal == "path"){
//get the coordinates of the point on the svg
let svgPoint = getPoint(x,y);
//draw a circle with the center on the svg point
drawCircle({cx:svgPoint.x,cy:svgPoint.y,r:.01}, svg)
//incerase the counter
n++
};
// if you have already 6 points break the loop
if(n == circlesLength){break;}
}
// a function to get a random integer from an interval
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn);
}
// a function to get the svg coordinates of a point on the svg canvas
function getPoint(x,y){
var p = svg.createSVGPoint();
p.x = x;
p.y = y;
var ctm = svg.getScreenCTM().inverse();
var p = p.matrixTransform(ctm);
return p;
}
// a function to draw a circle
function drawCircle(o, parent) {
var circle = document.createElementNS(SVG_NS, 'circle');
for (var name in o) {
if (o.hasOwnProperty(name)) {
circle.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(circle);
return circle;
}
svg {
border: 1px solid;
overflow: visible
}
path {
stroke: black;
fill:gold;
vector-effect: non-scaling-stroke;
}
circle{fill:red}
<svg id="svg" width=200 fill="none" >
<path class="path" id="thePath" d='M 1.08583,1.84181 l 0.02003,0.00322 0.003917,-0.008192 0.001098,-0.00409 0.001925,-0.003735 0.003098,-0.007964 0.001112,-0.002924 0.000531,-0.003501 0.001664,-0.004677 0.001465,-0.004257 0.004778,-0.001624 0.004599,0.000546 0.003444,-2.8e-05 0.003444,-2.8e-05 0.003444,-2.8e-05 0.002289,-0.000602 0.005166,-4.2e-05 0.003443,-2.9e-05 0.001701,-0.001762 0.001105,-0.003507 -0.001184,-0.002905 -0.001198,-0.00407 -0.002346,-0.004061 -0.002339,-0.003479 -0.001633,-0.00216 -0.00245,-0.003053 -0.001757,-0.0029 -0.003488,-0.003469 -0.004053,-0.002881 -0.004047,-0.002299 -0.004628,-0.002877 -0.00231,-0.001147 -0.004054,-0.002881 -0.002891,-0.001726 -0.002885,-0.001142 -0.003465,-0.00172 -0.004039,-0.001716 -0.003466,-0.001721 -0.002318,-0.00173 -0.002331,-0.002895 -0.001766,-0.003483 0.000546,-0.002336 -0.000624,-0.004076 0.000538,-0.002918 -5.7e-05,-0.004663 0.001055,-0.007587 -0.000646,-0.005824 0.000516,-0.004667 0.000532,-0.003502 0.002216,-0.00643 0.006286,-0.002384 0.009184,-7.4e-05 0.00518,0.001123 0.005173,0.000541 0.004613,0.001711 0.004585,-0.00062 0.006881,-0.000639 0.005159,-0.000625 0.004003,-0.001199 0.003423,-0.001776 0.004011,-0.000616 0.00226,-0.002933 0.001105,-0.003507 0.001679,-0.003511 0.003968,-0.004113 0.002863,-0.000606 0.003487,0.003469 3.5e-05,0.002915 0.00061,0.002909 0.002892,0.001725 0.003465,0.001721 0.007512,0.004019 0.008079,0.003431 0.009844,0.006915 0.002339,0.003478 0.002346,0.004062 0.001929,0.004325 0.001601,0.002641 0.00635,0.002862 0.004613,0.001712 0.006903,0.001109 0.00805,0.0011 0.002877,0.00056 0.003451,0.000554 0.004606,0.001129 0.00404,0.001716 0.002325,0.002312 0.00175,0.002318 0.001184,0.002905 0.001765,0.003482 0.001758,0.002901 0.007505,0.003436 0.006888,-5.6e-05 0.004011,-0.000616 0.003429,-0.001194 0.059804,-0.085011 0.004557,-0.002951 0.005122,-0.003539 0.007391,-0.00589 0.002841,-0.002355 0.044101,0.019307 0.00433,-0.002215 0.001097,-0.004089 0.004492,-0.008197 -0.00374,-0.003618 -0.005432,-0.002823 -0.001808,-0.001864 -0.003619,-0.002806 -0.004524,-0.002814 -0.007249,-0.001916 -0.003618,-0.002806 -0.003619,-0.002805 -0.004531,-0.000967 -0.002718,-0.00095 -0.003624,-0.000958 -0.003618,-0.002805 -0.002714,-0.001873 -0.00452,-0.004663 -0.000895,-0.003703 -0.003607,-0.006501 -0.003609,-0.005576 -0.004526,-0.002815 -0.00542,-0.006518 -0.006327,-0.006526 -0.001804,-0.002789 -0.001808,-0.001864 -0.003613,-0.004653 -0.004528,-0.001891 -0.003633,0.001814 -0.003636,0.002736 -0.005455,0.004568 -0.00454,0.001804 -0.002729,0.002746 -0.005459,0.005491 -0.004548,0.004576 -0.006363,0.004558 -0.009088,0.006381 -0.004531,-0.000967 -0.005441,-5.1e-05 -0.004537,0.000881 -0.00454,0.001804 -0.005437,-0.000975 -0.002712,-0.002797 -0.001793,-0.006484 2.1e-05,-0.006466 0.000927,-0.006458 0.002743,-0.007364 0.000949,-0.012924 -0.00175,-0.02034 -0.00086,-0.014789 -0.000862,-0.013865 -0.001767,-0.014797 -0.003539,-0.027747 -0.001779,-0.011103 -0.003601,-0.008348 -0.002702,-0.005568 -0.004523,-0.003738 -0.004513,-0.006509 -0.007219,-0.011154 -0.008105,-0.017629 -0.003604,-0.007424 -0.007223,-0.01023 -0.007218,-0.011154 -0.012646,-0.015824 -0.014491,-0.00568 -0.004171,-3.9e-05 -0.004022,0.010123 -0.001832,0.005526 -0.002746,0.008287 -0.002741,0.006441 -0.001828,0.004602 -0.000925,0.005534 -0.000918,0.003686 -0.000925,0.005534 -0.002741,0.006441 -0.005458,0.005491 -0.003645,0.005508 -0.003639,0.00366 -0.00545,0.00272 -0.005446,0.001796 -0.006353,0.001788 -0.007258,0.000855 -0.009989,0.004524 -0.009083,0.004533 -0.004543,0.002729 -0.003648,0.006431 -0.003644,0.005509 -0.004555,0.006423 -0.003644,0.005509 -0.002733,0.003668 -0.001825,0.003679 -0.005464,0.007338 -0.004543,0.002728 -0.004543,0.002729 -0.00272,-2.6e-05 -0.008155,-0.001925 -0.00906,-0.002857 -0.005431,-0.002823 -0.007261,0.001779 -0.009068,-8.6e-05 -0.002712,-0.002797 -0.002702,-0.005568 -0.006336,-0.003755 -0.002729,0.002745 -0.004537,0.000881 -0.002712,-0.002797 -0.005431,-0.002823 -0.005438,-0.000975 -0.004537,0.000881 -0.007276,0.006397 -0.003644,0.005508 -0.004551,0.0055 -0.004547,0.003652 -0.00501,0.001292 -0.013143,0.004079 -0.00817,0.002694 -0.009083,0.004533 -0.006359,0.003635 -0.005455,0.004567 -0.005456,0.004568 -0.005261,0.004939 0.002906,0.002891 0.001772,0.004066 0.00292,0.004056 0.004642,0.004043 0.002328,0.003456 0.000621,0.002932 -0.000538,0.002919 -0.001119,0.00234 -0.001701,0.001763 -0.001679,0.003512 -0.001679,0.003511 -0.001119,0.002341 -0.000538,0.002919 0.001176,0.002321 0.001184,0.002905 -0.000545,0.002337 -0.000481,0.007582 0.001765,0.003483 0.004032,0.001132 0.004032,0.001133 0.005748,0.000536 0.004032,0.001133 0.003458,0.001138 0.0046,0.000545 0.005238,0.001713 0.004548,0.000539 0.002699,-0.000692 0.007066,0.001196 0.004025,0.000549 0.002877,0.00056 0.003451,0.000555 0.003452,0.000554 0.00231,0.001148 0.005819,0.006364 3.6e-05,0.002914 0.000609,0.00291 -0.000545,0.002336 -0.005704,0.002961 -0.002849,0.001772 -0.002246,0.004099 -0.001111,0.002924 3.5e-05,0.002914 5.1e-05,0.00408 0.002346,0.004061 0.001183,0.002905 0.001177,0.002322 -0.001119,0.002341 -0.002849,0.001772 -0.001657,0.00526 0.00061,0.002909 -0.004535,0.004701 -0.001119,0.00234 -0.000524,0.004085 0.002927,0.00464 0.001191,0.003487 0.001192,0.003488 0.000609,0.00291 0.001184,0.002905 0.00175,0.002317 0.002325,0.002313 0.001744,0.001734 0.003465,0.001721 0.002311,0.001147 3.5e-05,0.002914 4.3e-05,0.003497 -0.000545,0.002337 -0.002224,0.005846 -0.005719,0.001796 -0.003429,0.001194 -0.004004,0.001199 -0.005166,4.1e-05 -0.00287,2.4e-05 -0.005589,0.012287 -0.001105,0.003506 -0.001679,0.003512 -0.001672,0.004094 -0.005123,0.003539 0.000681,0.008738 0.002356,0.005182 0.001799,0.00586 5.7e-05,0.004662 0.001191,0.003489 0.005726,-0.001213 0.002855,-0.001189 0.00231,0.001147 0.002318,0.001729 0.001758,0.002901 0.001779,0.004648 0.002332,0.002896 0.002346,0.004061 0.003444,-2.8e-05 0.003444,-2.8e-05 0.004585,-0.00062 0.002289,-0.000602 0.005144,-0.001791 0.007477,0.001105 0.0021,0.000987 0.00887,0.00417 0.004082,0.005213 0.00409,0.005796 0.002331,0.002895 -0.000545,0.002336 0.00178,0.00465 0.000631,0.004657 0.001184,0.002906 0.002339,0.003478 0.004068,0.004047 0.002906,0.002891 0.004621,0.002294 0.002905,0.002891 0.005116,0.002664 0.050227,0.008073 z'></path>
</svg>
作为评论，我想补充一点，在SVG中使用这样的小数字不是一个好主意.请阅读本文: SVG中的数字限制
As a comment I would like to add that using small numbers like this in SVG is not a good idea. Please read this article: The Limits of Numbers in SVG
希望对您有帮助.
这篇关于如何在SVG地图上随机填充圆形标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
