我有 SVG map ，我想在其上放置一个圆圈符号，该符号将包含一些基于 map 数据的数字。但是，当我有 map 的 SVG 时，圆圈不会显示在 SVG map 的 viewBox 上。当我删除 viewBox 时，会显示圆圈。我能做什么？
<svg height=200 width=200 fill= "none" viewBox='1.0490324 1.35343 0.1085725 0.609755'>
<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="100" height="100" />
<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>
CSS:
路径{描边:黑色；笔划宽度:0.01；填充:“绿色”； }
使用 map View 框: enter image description here
没有 map View 框: enter image description here
最佳答案
你需要给你的使用一个更小的宽度和高度。你给 use 的 with 和 height 太大了。您还需要像这样使用 x 和 y:
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>我还更改了您的 svg 元素的 viewBox，因为 map 落在框外。为了知道您需要使用的 viewBox 的值，您可以使用 .gerBBox() 方法获取路径的大小。
关于javascript - map SVG 的 View 框小于要显示的圆形标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56282983/