裁剪SVG的正确方法？

我完全被SVG图像困惑。我想将图像裁剪为其核心内容。我想通过指定其视框和/或视口和/或其他任何东西来裁剪它，除非我不想更改折线元素中的任何点。图像是呈现这样的东西。（注：边框仅用于说明目的。边界实际上不是SVG的一部分。）裁剪SVG的正确方法？

original

，我想，所以它看起来像这样的东西裁剪。（注：再次边境仅用于说明目的）

cropped

鉴于这种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>

来源

2014-03-25 HairOfTheDog

你怎么想裁剪。你有什么尝试？你卡在哪里？ – PeeHaa

我已经尝试将视口设置为各种高度，宽度值，并很快发现单独无法工作。我还尝试将viewbox设置为许多不同的值，并取得了一些成功。我发现关闭viewBox =“39 243 378 417”，但我不是100％确定为什么那种有点接近。我还查看了preserveAspectRatio属性的各种排列，并最终尝试了上述所有内容的几种组合。我只是失败了。 – HairOfTheDog

当SVG是inline，可以计算其使用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>

来源

2014-03-26 02:48:06

我在Android上使用的SVG库没有getBBox方法。（我假设BBox代表Bounding Box。）但是，您的示例HTML代码完成了这个任务，因为它向我展示了viewBox是一个标准的矩形结构，定义为{x，y，width，height}。知道我能够对每条折线的点进行一些简单的计算来找到这四个值。 – HairOfTheDog

裁剪SVG的正确方法？

回答

相关问题