无法获得适合 SVG 框的 SVG 路径

Question

我一直试图让一个 SVG 路径出现在我的 SVG 矩形的中间，它填充了整个 svg 元素。到目前为止，我已经尝试了以下方法，但无济于事

1. 将路径元素放在<g> 标记中，并根据我从elementgetBBox() 获得的值转换组。我会使用这些值和整个 SVG 框的值来尝试获得正确的数字来缩小元素，但它仍然不适合，也没有居中
2. 与#1 做同样的事情，但使用嵌套的<svg> 标签而不是<g> 标签。
3. 试图转换元素本身。

我遇到的主要问题是：

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

我有一个jsfiddle of the svg that I'm trying to work with，如果有帮助的话。

Answer 1

如果你给矩形你想要一个“矩形”的 id，那么这将使星形适合矩形：

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 + ")");

Answer 2

对于方法#2，如果路径的边界不是很明显（您使用的是相对路径命令，那么您的不是），只需尝试使用 viewBox 直到找到正确的边界。对于你的星星，结果是 (50,55 - 460,455)。

<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>

    <svg  width="350" height="200" x="0" y="0" viewBox="50 55 410 400">
       <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>
      </svg>

</svg>

http://jsfiddle.net/epTp9/4/

对于方法 #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>

http://jsfiddle.net/epTp9/5/

Answer 3

这是一个有效的小提琴

http://jsfiddle.net/epTp9/3/

这是路径的更改代码。

<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>