无法将SVG路径适配到SVG盒子中

Question

我一直在尝试让一个SVG路径出现在填满整个SVG元素的SVG矩形中央。到目前为止，我已经尝试了以下几种方法，但都没有成功：

1. 将路径元素放置在
2. 与#1相同，但使用嵌套的
3. 尝试转换元素本身。

我遇到的主要问题是：

• 我似乎找不到一种动态适应正方形的方法
• 由于某种原因，路径元素似乎向右挂着。我想让它与顶部和左侧对齐

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

- Rickey E Smith

---

通过扩大SVG画布来使路径居中很容易——将高度和宽度属性设置为600，就可以了。http://jsfiddle.net/remus/epTp9/1/ 但是，如果你想要根据需要调整大小，那么在path计算中就必须使用某种变量来进行动态处理。 - brandonscript

@r3mus 如果我这样做，那么图片会变得非常巨大。 - Rickey E Smith

Answer 1

这里有一个可用的JSFiddle示例：

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>

- lopa

---

它适合，但在矩形内完全没有对齐。 - Rickey E Smith

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/

对于第三种方法，只需要找到正确的比例，然后将其移动到正确的位置即可。

（注：此处原文中出现了拼写错误，已进行修正）

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

- Paul LeBeau

---

这个可以工作，但是它的居中效果不太好。在我正在制作的应用程序中，有时候背景图片会被分成两半，当出现这种情况时，图片看起来就不对了。这里有一个使用2种颜色的示例 - Rickey E Smith

那只是意味着我的转换有点偏移。我基本上是凭眼睛来做的。将它改为 translate(95 -55) 就更好了。请参见 http://jsfiddle.net/epTp9/9/。我列出的两种方法中第一种可能是总体上更好的解决方案。一旦你找到了正确的 viewBox，就可以在多个位置轻松地重复使用星形，并使其自动居中。 - Paul LeBeau

Answer 3

如果你给想要适配的矩形一个"rect"的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 + ")");

- Robert Longson

---

这似乎不起作用。这里是一个包含您建议的更新的fiddle。当我点击按钮时，什么也没有发生。 - Rickey E Smith

这是因为run从未被调用。检查浏览器错误日志，你会发现问题出在你的jsfiddle上：这里是同样的代码运行正常：http://jsfiddle.net/longsonr/epTp9/11/ - Robert Longson

利用上述方法，是否可以保持路径的纵横比？ - CLiown