裁剪 SVG 的正确方法？
Posted
技术标签:
【中文标题】裁剪 SVG 的正确方法？【英文标题】：Proper way to crop an SVG? 【发布时间】：2014-03-25 22:23:13 【问题描述】：我对 SVG 图像完全感到困惑。我想将图像裁剪为其核心内容。我想通过指定它的视框和/或视口和/或其他任何东西来裁剪它，除了我不想更改折线元素中的任何点。图像原样呈现类似这样的内容。 （注意边框仅用于说明目的。边框实际上并不是 SVG 的一部分。）
我想裁剪它，使它看起来像这样。 （注意边框再次仅用于说明目的）
鉴于这个 SVG XML，我该如何裁剪它？
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<polyline points="39,340 42,338 47,333 54,322 68,308 83,292 91,277 100,259 106" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="71,299 82,303 95,304 109,302 120,301" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="212,275 228,254 233,233 240,208 239,246 188,278 174,306 158,334 149,351 144,358 140,362 139,362 139,340 179,313 186" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="169,345 174,347 227,333 231,330 330,371 328,374 414,209 410,192 404,183 401,177 398,177 395,179 379,340 385,384 397,414" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
【问题讨论】：
你想如何裁剪它。你试过什么？你被困在哪里了？ 我尝试将视口设置为各种高度、宽度值，但很快发现仅靠这些值是行不通的。我还尝试将视图框设置为许多不同的值，并取得了一些成功。我发现的关闭是 viewBox="39 243 378 417" 但我不是 100% 确定为什么会接近。我还查看了 preserveAspectRatio 属性的各种排列，最后尝试了以上所有内容的几种组合。我只是迷路了。 【参考方案1】：当 svg 内联时，您可以使用 getBBox() 作为根 svg 来计算其 viewBox。
以下是折线的示例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Compute viewBox</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<h3>Compute viewBox</h3>
<div id=svgDiv style='background-color:lightgreen'>
<svg id=mySVG>
<polyline points="39,340 42,338 47,333 54,322 68,308 83,292 91,277 100,259" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="71,299 82,303 95,304 109,302 120,301" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="212,275 228,254 233,233 240,208 239,246 188,278 174,306 158,334 149,351 144,358 140,362 139,362 139,340 179,313 " style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="169,345 174,347 227,333 231,330 330,371 328,374 414,209 410,192 404,183 401,177 398,177 395,179 379,340 385,384 397,414" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
</div>
<button onClick=fit()>fit</button>
viewVox:<input type=text size=20 id=vbValue />
</center>
</body>
<script>
//---button--
function fit()
var bb=mySVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var vb=[bbx,bby,bbw,bbh]
mySVG.setAttribute("viewBox", vb.join(" ") )
vbValue.value=vb.join(" ")
svgDiv.style.width=bbw+"px"
svgDiv.style.height=bbh+"px"
</script>
</html>
【讨论】：
我一直在 android 上使用的 SVG 库没有 getBBox 方法。 （我假设 BBox 表示边界框。）但是您的示例 HTML 代码成功了，因为它向我展示了 viewBox 是定义为 x, y, width, height 的标准矩形结构。知道我能够对每条折线的点进行一些简单的计算以找到这四个值。 NodeJS 上如何计算？以上是关于裁剪 SVG 的正确方法？的主要内容，如果未能解决你的问题，请参考以下文章