Javascript 在JS/CSS中调整SVG的高度

我有一个svg文件，它包含了世界上所有的国家。每个国家都有自己的路径，例如：

<path
      inkscape:connector-curvature="0"
      id="PH"
      data-name="Philippines"
      data-id="PH"
      d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 1.1,1.9 3.9,-3.6 2.7,0.3 1.5,-2.7 3.8,3 -1.5,3.1 1.9,4.6 6.8,3.7 1.4,-3 -2.1,-4.7 2.4,-3.2 2.5,6.4 1.5,-5.8 -0.6,-3.5 -0.8,-4.3 z m -14.5,-11.8 0,-6.1 -3.6,6.1 0.5,-4.2 -3,0.3 -0.3,4 -1.2,1.8 -1,1.7 3.8,4.4 1.6,-1.9 1.4,-4 1.8,-2.1 z m -30.1,6.1 2.6,-4.4 3.4,-3.5 -1.5,-5.2 -2.4,6.3 -2.9,4.4 -3.8,4 -2.4,4.4 7,-6 z m 17.4,-16.4 1.2,3 -0.1,3.3 0.5,2.9 3.3,-1.9 2.4,-2.7 -0.2,-2.6 -3.6,0 -3.5,-2 z m 20,-1.7 -1.8,-2.4 -5.4,-0.1 4,4.8 0.3,2.4 -3.3,-0.5 1.2,3.9 1.7,0.3 0.7,4.5 2.5,-1.4 -1.7,-4 -0.4,-2.1 4.5,1.7 -2.3,-7.1 z m -22.9,-5.8 -2.2,-2.3 -4.8,-0.2 3.4,4.8 2.8,3.2 0.8,-5.5 z m -6.4,-34.6 -3.3,0 -0.9,5.8 1.1,9.9 -2.6,-2 1.2,6 1.2,2.8 3.3,3.7 0.4,-2.3 1.8,1.4 -1.5,1.7 0.1,2.6 2.9,1.4 5,-0.9 4,3.8 1.1,-2.4 2.5,3.4 4.8,3.1 0.2,-2.9 -2,-1.6 0.1,-3.4 -7.5,-3.6 -2.3,0.8 -3.1,-0.7 -2,-5.1 0.1,-5.1 3,-2.1 0.6,-5.3 -2.7,-4.6 0.4,-2.6 -0.7,-1.6 -1.5,1.6 -3.7,-1.8 z"
      style="fill:#1abc9c;fill-rule:evenodd;" />

<path
      inkscape:connector-curvature="0"
      id="PL"
      data-name="Poland"
      data-id="PL"
      d="m 1069.4,228.3 -4.6,-0.1 -0.5,-1.4 -4.8,-1.1 -5.7,2.1 -7.1,2.8 -3.1,1.7 1.4,3.1 -1.2,1.6 2,2.2 1.4,3.3 -0.1,2.1 2.3,3.9 2.4,1.9 3.7,0.6 -0.1,1.7 2.7,1.2 0.6,-1.5 3.4,0.6 0.7,2 3.6,0.3 2.6,3.1 0.3,0.4 1.9,-0.9 2.7,2.2 2.8,-1.3 2.4,0.6 3.4,-0.8 4.9,2.3 1.1,0.4 -1.6,-2.8 3.8,-5.1 2.3,-0.7 0.3,-1.8 -3.1,-5.3 -0.5,-2.7 -1.9,-2.9 2.7,-1.2 -0.3,-2.4 -1.7,-2.3 -0.6,-2.7 -1.4,-1.9 -2.5,-0.6 -8.7,0.1 -5.9,-0.7 z"
      style="fill:#f2f2f2;fill-rule:evenodd" />

然而，我想扩大用户点击的国家。我试过了

phCountry.setAttribute（“高度”、“100px”）

phCountry.style.height=“100px”
我对svg和js非常陌生，所以我可能用了错误的方法。
我怎样才能解决这个问题？非常感谢
 
元素没有可以更改的宽度或高度属性。您需要做的是应用一个
变换
，当您单击国家/地区路径时，它会缩放这些路径

此外，您不需要向SVG添加
标记。只需向每个路径添加一个单击处理程序

请参见下面的示例。我已经在代码注释中描述了它是如何工作的


//查找SVG中的所有元素，并为每个元素添加一个单击处理程序
document.querySelectorAll（“svg路径”）.forEach（函数（项）{
item.addEventListener（“单击”，countryClick）；
});
功能单击（e）{
//e.target是我们单击的路径。
//切换（“放大”）将导致添加“放大”类，然后在交替单击时删除
e、 target.classList.toggle（“放大”）；
}
。放大{
/*使用路径的边界计算变换原点*/
变换框：填充框；
/*将缩放原点设置为路径边界的中心*/
变换原点：50%50%；
/*在x和y方向上放大2*/
变换：比例（2,2）；
}

phCountry
是一个元素，每个元素都有自己的
高度
和
宽度
属性。你已经试过了吗？@r3wt是的，我也试过了。我想调整一下这个元件是不行的。我甚至尝试将
style=“width:100px；”“
放在svg本身的标记中。我想我们真的需要修改svg属性或其他什么？或者在对象中包含元素，然后缩放它？我不知道。您是否尝试过使用javascript插入针对特定路径的css<代码>类似于路径[id=“PH”]{//your css}
@r3wt这对于SVG元素是不正确的。大多数人不支持高度和宽度。你可能想看看这个答案：这可能是你需要的。非常感谢你，这实际上是我需要的！关于这件事，我又收到一个询问：1。如何使所选国家/地区朝中心重新定位。2.以及单击后如何通过/进入国家/地区id？再次感谢您d您可以使用
event.target.id
获取所单击对象的id。至于将路径移动到中心，除了
scale（）
之外，还需要在
transform
属性中包含
translate（）
操作。但是，每一条路径都会有所不同，因为它们需要从不同的地方移动。有很多关于如何做到这一点的信息。所以我把这部分留给你去试一下。祝你好运如果你被卡住了，你总是可以问另一个问题。但这很简单。非常感谢！很抱歉反应太晚了！：）上帝保佑！先生，如果我想让其他国家在点击时变暗/调整不透明度怎么办？一种方法是给你选择的国家一个类（例如“已选择”）。然后您可以有一个CSS规则，如：
svg>：not（.selected）{opacity:0.5；}
<a href = "#" onclick = "SelectCountry('ph');" id = 'country_ph'> 
   <path
      inkscape:connector-curvature="0"
      id="PH"
      data-name="Philippines"
      data-id="PH"
      d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 1.1,1.9 3.9,-3.6 2.7,0.3 1.5,-2.7 3.8,3 -1.5,3.1 1.9,4.6 6.8,3.7 1.4,-3 -2.1,-4.7 2.4,-3.2 2.5,6.4 1.5,-5.8 -0.6,-3.5 -0.8,-4.3 z m -14.5,-11.8 0,-6.1 -3.6,6.1 0.5,-4.2 -3,0.3 -0.3,4 -1.2,1.8 -1,1.7 3.8,4.4 1.6,-1.9 1.4,-4 1.8,-2.1 z m -30.1,6.1 2.6,-4.4 3.4,-3.5 -1.5,-5.2 -2.4,6.3 -2.9,4.4 -3.8,4 -2.4,4.4 7,-6 z m 17.4,-16.4 1.2,3 -0.1,3.3 0.5,2.9 3.3,-1.9 2.4,-2.7 -0.2,-2.6 -3.6,0 -3.5,-2 z m 20,-1.7 -1.8,-2.4 -5.4,-0.1 4,4.8 0.3,2.4 -3.3,-0.5 1.2,3.9 1.7,0.3 0.7,4.5 2.5,-1.4 -1.7,-4 -0.4,-2.1 4.5,1.7 -2.3,-7.1 z m -22.9,-5.8 -2.2,-2.3 -4.8,-0.2 3.4,4.8 2.8,3.2 0.8,-5.5 z m -6.4,-34.6 -3.3,0 -0.9,5.8 1.1,9.9 -2.6,-2 1.2,6 1.2,2.8 3.3,3.7 0.4,-2.3 1.8,1.4 -1.5,1.7 0.1,2.6 2.9,1.4 5,-0.9 4,3.8 1.1,-2.4 2.5,3.4 4.8,3.1 0.2,-2.9 -2,-1.6 0.1,-3.4 -7.5,-3.6 -2.3,0.8 -3.1,-0.7 -2,-5.1 0.1,-5.1 3,-2.1 0.6,-5.3 -2.7,-4.6 0.4,-2.6 -0.7,-1.6 -1.5,1.6 -3.7,-1.8 z"
      style="fill:#1abc9c;fill-rule:evenodd;" />
   </a>

var phCountry = document.getElementById("PH");

function SelectCountry(country)
{
    alert(country);
}