围绕svg中的对象进行倒角

Bevel around object in svg

本文关键字：对象 svg 围绕      更新时间：2023-09-26

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

这里有一个例子：

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

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

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

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

还要注意，这种方法可能很难修改以处理更复杂或更一般的情况。

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

相关文章：