Question

我需要在svg中的元素周围绘制rect。我尝试使用getBBox方法但是如果我增加一个元素的stroke-width，它会变得比rect大。如何让rect包含完整的对象？

以下是一个例子：

＆＃13;

var line = $("line").get(0);
var rect = $("rect").get(0);
var bb = line.getBBox();
rect.setAttribute("x", bb.x);
rect.setAttribute("y", bb.x);
rect.setAttribute("width", bb.width);
rect.setAttribute("height", bb.height);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="200">
  <line x1="50" y1="50" x2="450" y2="150" stroke="#000000" stroke-width="40" />
  <rect stroke="#2795EE" stroke-dasharray="10, 5" fill="none"/>
</svg>

＆＃13;

Answer 1

SVG规范（http://www.w3.org/TR/SVG/types.html#__svg__SVGLocatable__getBBox）声明getBBox（）函数＆＃34;返回当前用户空间中的紧密边界框（即，在应用'transform'属性后，如果有的话）所有包含的图形元素的几何图形，不包括抚摸，剪切，遮罩和滤镜效果＆＃34;。基本上，该方法返回路径点的边界框，该边界框为填充的形状提供了良好的边界框，但对于描边形状没有良好的边界框。您可以为每条边添加半个笔触宽度，以便为描边形状获得更好（但不完美）的边界框。在您的示例中，您可以使用类似......

的内容

var line = $("line").get(0);
var rect = $("rect").get(0);
var bb = line.getBBox();
var strokeWidth = parseFloat(line.getAttribute("stroke-width"));
rect.setAttribute("x", bb.x - strokeWidth / 2);
rect.setAttribute("y", bb.y - strokeWidth / 2);
rect.setAttribute("width", bb.width + strokeWidth);
rect.setAttribute("height", bb.height + strokeWidth);

请注意，这种方法并不完美。扩展的盒子在某些方面可能太大了。

另请注意，此方法可能难以修改以处理更复杂或更一般的情况。

Answer 2

显然，getBBox在每个浏览器中的工作方式都不一样。在我看来，你最好的选择是使用RaphaëlJS http://raphaeljs.com/

svg中对象周围的斜角

2 个答案: