Html CSS更改svg元素的路径

我有一个生成的svg箭头，我想把它改成另一个形状，我不知道如何生成svg点。 这是第一个形状：

---

我在浏览器检查器中得到了d:Unknown属性名，即使您不知道如何在svg中创建形状，我也可以教您

步骤1：在此处下载metro studio：

步骤2：安装并打开它

步骤3：搜索箭头

第四步：选择满足您需要的图标，然后按箭头上的编辑按钮。请查看此图像以供参考：

第五步：点击左下角的代码，如下图所示：

步骤6：单击SVG选项卡，您将看到它

如果您有任何其他问题，请随时询问

更新：

以下是arrow的svg代码：

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
  <g>
    <path id="path1" transform="rotate(0,24,24) translate(11,15.9968754649162) scale(0.8125,0.8125)  " fill="#FFFFFF" d="M13,3.3000036L3,9.8999957 13,16.399996 13,11.300005 29.799988,13.500002 29.799988,6.1999978 13,8.3000039z M15.200012,0L15.200012,6.8999947 32,4.8000039 32,14.899996 15.200012,12.699999 15.200012,19.699999 0,9.8999957z" />
  </g>
</svg>

---

我建议使用SVG编辑器。网上有很多免费的。@bourax，你能把上面的图片链接给我吗？我在使用的internet上看不到它们。@user7393973:d不是css属性在SVG2中，d可以是css属性。Chrome支持这一点。我的意思是这不起作用：@bourax，它显示了任何东西还是没有图像？它根本没有显示任何东西。代码是生成的，所以我尝试在CSS文件中覆盖它：所以我写这个：map\u outer svg path{笔划：RGB255204，0！重要；填充：RGB51102153！重要；d:M 850 300 C 850 300 350 300 L 348.1205.39 L 120 400.39 L 348.1606.19 L 350 500 C 850 500 z！重要；变换：matrix0；笔划宽度：0；}但是我得到了d和斯托克宽度无效的属性！！！！但是我可以覆盖“填充”和“笔划宽度”你能复制数据给我吗？我使用Linux@bourax我不明白你为什么不想安装metro studio？它是免费的。这不起作用，我只需要更改代码，而不是使用新的code@bourex然后只需复制path的d属性的值元素从我的代码到您的代码，它应该可以正常工作。请参阅我的更新，CSS检查器告诉我d是未知的属性名

#map_outer svg path{
    d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important;
    stroke-width: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
  <g>
    <path id="path1" transform="rotate(0,24,24) translate(11,15.9968754649162) scale(0.8125,0.8125)  " fill="#FFFFFF" d="M13,3.3000036L3,9.8999957 13,16.399996 13,11.300005 29.799988,13.500002 29.799988,6.1999978 13,8.3000039z M15.200012,0L15.200012,6.8999947 32,4.8000039 32,14.899996 15.200012,12.699999 15.200012,19.699999 0,9.8999957z" />
  </g>
</svg>