Question

我有一张有州的地图。这是一个包含路径（状态）的svg映射，我需要在每个路径（状态）的中心添加标记。

// function to add markers to svg map
function addMarker (svgContainer, lga) {
  const key = '[id=' + '\'' + lga + '\'' + ']';
  const d = d3.select('#map').select('svg')
    .select('g').select('g').select(key).node();
  //calculating the path centre point
  const x = d.getBBox().x + d.getBBox().width/2;
  const y = d.getBBox().y + d.getBBox().height/2;
  // adding marker 
  svgContainer.append('path')
    .attr('d', 'M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z')
    .attr('stroke', 'black')
    .attr('fill', 'green')
    .attr('stroke-width', 0.005)
    .attr('transform', 'translate('+ x + ','+ y+ ') scale(0.002)');

}

svg map with states

Answer 1

这是我使用加泰罗尼亚轮廓的示例。路径的边界框是对象适合的最小矩形。如您所见，我正在使用的路径的形状大部分落在它的边界框的左上方。 “标记”位于路径边界框的中心，而不是路径的中心。

我还为表示点{0,0}的符号添加了一个红色小圆圈。您可以删除它。

// the bounding box of the path
let bb = catalunya.getBBox()
//the center of the bounding box
let center = {}
center.x = bb.x + bb.width/2;
center.y = bb.y + bb.height/2;
//set the x and y attributes of the use element
theUse.setAttributeNS(null,"x",center.x);
theUse.setAttributeNS(null,"y",center.y);

svg{border:1px solid; width:90vh}

path{stroke:black;fill:none}

<svg viewBox="0 0 498 495">
  
  <defs>
   <symbol id="marker" viewBox="-11 -32 22 36" >
    <path id="kk" d='m0, 1 l-8.8, -17.7 c-3.3, -6.6 1.4, -14.3 8.8, -14.3 l0, 0 c7.4, 0 12.1, 7.7 8.8, 14.3 l-8.8, 17.7 z' />
     <circle r="3" fill="red" />
   </symbol>
  </defs>
  
  <use id="theUse" xlink:href="#marker" width="50" height="50"  />
<path id="catalunya" d="M180.778,34.489
	c-7.137,2.339-13.98,3.992-20.299,6.82c-6.115,2.737-9.794,0.969-14.098-3.587c-9.822-10.398-18.969-21.751-35.429-22.507
	c-8.477-0.389-16.839-3.288-25.424-5.09c-5.087,11.759-10.027,23.015-14.773,34.353c-0.587,1.402-0.354,3.267-0.14,4.869
	c5.235,39.11,10.561,78.208,15.692,117.332c0.315,2.406-0.208,5.367-1.406,7.46c-16.886,29.46-33.96,58.812-50.972,88.199
	c-0.586,1.012-1.009,2.118-1.826,3.857c11.056-3.285,21.275-6.321,32.502-9.657c-1.271,2.462-1.909,3.797-2.631,5.084
	c-9.536,16.979-18.984,34.008-28.708,50.878c-2.091,3.629-2.613,6.178,0.625,9.497c3.694,3.788,6.673,8.272,10.009,12.512
	c-0.44,0.856-0.775,1.608-1.195,2.31c-9.236,15.426-18.521,30.822-27.666,46.302c-0.92,1.559-1.714,3.759-1.367,5.407
	c2.677,12.698,5.788,25.306,8.403,38.016c0.459,2.23-0.192,5.144-1.345,7.163c-2.932,5.138-6.438,9.948-10.477,16.041
	c16.966,12.396,33.576,24.6,50.323,36.61c1.069,0.767,3.474,0.583,4.803-0.075c7.905-3.912,15.675-8.096,23.492-12.186
	c12.945-6.773,25.893-13.544,38.832-20.312c-0.51-3.013-1.264-5.614-1.321-8.23c-0.09-4.039-2.078-4.854-5.711-4.753
	c-8.326,0.231-16.664,0.073-24.997,0.073c-6.755,0-13.511,0-21.22,0c1.239-1.565,1.725-2.357,2.375-2.978
	c24.954-23.8,49.887-47.621,74.97-71.284c1.585-1.495,4.331-2.395,6.566-2.454c9.826-0.261,19.665-0.008,29.495-0.179
	c2.749-0.048,5.643-0.491,8.202-1.462c42.308-16.051,84.498-32.415,126.928-48.134c6.283-2.328,7.825-5.511,8.036-11.447
	c0.371-10.48,1.478-20.935,2.256-31.401c0.197-2.654,0.906-4.529,3.972-5.421c28.269-8.229,56.509-16.56,84.691-25.079
	c2.456-0.742,5.064-2.595,6.549-4.681c13.707-19.271,27.224-38.678,40.646-58.148c1.088-1.578,1.779-4.05,1.447-5.889
	c-3.131-17.359-6.355-34.706-9.89-51.987c-3.36-16.432-3.513-16.365,9.784-26.776c4.75-3.719,9.355-7.62,14.828-12.094
	c-19.724-3.718-38.169-7.272-56.663-10.557c-1.843-0.327-4.22,0.592-5.942,1.616c-18.455,10.984-36.851,22.069-55.199,33.231
	c-2.703,1.645-4.71,1.894-7.509-0.145c-9.55-6.954-19.31-13.627-29.098-20.247c-1.701-1.151-3.89-2.026-5.919-2.184
	c-44.502-3.464-89.014-6.771-133.258-12.938c-3.511-0.49-4.665-1.627-5.216-5.018C184.862,55.08,182.774,45.012,180.778,34.489z"/>
</svg>

如何在SVG地图路径上将标记居中

1 个答案: