3

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

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

我遇到的主要问题是：

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

如果有帮助，我有一个我正在尝试使用的 svg 的 jsfiddle。

4

3 回答 3

2

这是一个工作小提琴

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>
于 2013-11-01T06:19:03.560 回答
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/

于 2013-11-01T06:45:52.727 回答
1

If you give the rect you want to fit an id of "rect" then this will fit the star into the rectangle:

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 + ")");
于 2013-11-01T07:09:06.793 回答