Question

我对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>

Answer 1

当svg为内联时，您可以使用viewBox为根svg计算其getBBox()。

以下是折线的示例：

<!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>

正确的方法来裁剪SVG？

1 个答案: