Javascript 无法获取适合SVG框的SVG路径 我一直试图让SVG路径出现在SVG ReCt的中间，填充整个SVG元素。到目前为止，我已经尝试了以下方法，但都没有效果 将path元素放置在标记中，并根据从elementgetBBox（）获取的值转换组。我会使用这些值，以及整个SVG框的值来尝试获得适当的数字来缩小元素，但它仍然不适合，也不居中 执行与#1相同的操作，但使用嵌套的标记而不是标记 试图转换元素本身

我面临的主要问题是：

• 我似乎找不到一种方法来动态地将路径元素适配到正方形上
• 由于某种原因，path元素似乎挂在右侧。我想让它与顶部和左侧齐平

---

如果有帮助的话，我有一把小提琴。

这是一把可以用的小提琴

这是更改后的路径代码

<g transform="scale(0.4)">
<path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path>

  </g>

对于方法#2，如果路径的边界不明显（您使用的是相对路径命令，所以您的命令不是），只需尝试viewBox，直到找到正确的边界。对于你的明星来说，结果是（50,55-460455）

对于方法#3，只需确定正确的比例，然后将其转换到正确的位置

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect>

    <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon"
          transform="scale(0.5) translate(90 -55) "></path>

</svg>

---

如果您给想要匹配的矩形指定一个id“rect”，那么这将使星形适合矩形：

var rectBBox = rect.getBBox();
var path = document.getElementById("star-2-outline");
var pathBBox = path.getBBox();

var scaleX = rectBBox.width / pathBBox.width;
var scaleY = rectBBox.height / pathBBox.height;
var translateX = rectBBox.x - pathBBox.x;
var translateY = rectBBox.y - pathBBox.y;

path.setAttribute("transform", "scale(" + scaleX + ", " + scaleY + ") translate(" + translateX + ", " + translateY + ")");

---

通过放大SVG画布，很容易将其固定在SVG中的路径中心——将height和width属性设置为600，它就可以工作了吗？但是进入动态区域，如果你想让它相应地变大，你必须在

路径计算中使用某种变量。@r3mus如果我这样做了，那么图像看起来会很大这是可行的，但它的居中性不是很好。在我正在制作的应用程序中，有时背景图像会一分为二，在这种情况下，图像看起来会变差，这意味着我的变换有点不对劲。我几乎是用眼睛做的。将其更改为
translate（95-55）
，效果会更好。见`。我列出的两种方法中的第一种可能是更好的总体解决方案。找到正确的视口后，您可以轻松地在多个位置重复使用星形，并使其自动居中。它适合，但不在矩形内对齐。这似乎不起作用。当我点击按钮时，什么也没发生。那是因为从未调用run。查看浏览器错误日志，您会发现是您的JSFIDLE出了问题：下面是相同的代码：使用上面的代码，是否可以保留路径的纵横比？
var rectBBox = rect.getBBox();
var path = document.getElementById("star-2-outline");
var pathBBox = path.getBBox();

var scaleX = rectBBox.width / pathBBox.width;
var scaleY = rectBBox.height / pathBBox.height;
var translateX = rectBBox.x - pathBBox.x;
var translateY = rectBBox.y - pathBBox.y;

path.setAttribute("transform", "scale(" + scaleX + ", " + scaleY + ") translate(" + translateX + ", " + translateY + ")");