SVG를 자르기위한 적절한 방법은 무엇입니까?

저는 SVG 이미지에 완전히 당황하고 있습니다. 이미지를 핵심 콘텐츠로 자릅니다. 뷰 박스 및/또는 뷰포트 및/또는 다른 점을 지정하여 자르기를 원합니다. 폴리선 요소의 점을 변경하지 않는 경우는 제외합니다. 이미지는 그대로 다음과 같이 렌더링됩니다. (. 경계가 실제로 SVG의 일부가 아닙니다. 경계는 설명 목적으로 만 참고)SVG를 자르기위한 적절한 방법은 무엇입니까?

original

와 나는 이런 식으로 뭔가를 보이는, 그래서 그것을 자르려. 이 SVG의 XML을 감안할 때

cropped

가 어떻게 그것을 자르 않습니다 (다시 경계는 단지 설명을위한 참고)?

<?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 = "39 243 378 417"이었습니다. 그러나 나는 왜 그렇게 가까이 왔는지 100 % 확실하지 않습니다. 또한 preserveAspectRatio 특성에 대한 다양한 순열을 살펴본 후 마지막으로 위의 모든 조합을 시도했습니다. 나는 단지 평범한 사람이다. – HairOfTheDog

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>

출처

2014-03-26 02:48:06

안드로이드에서 사용하고있는 SVG 라이브러리에는 getBBox 메소드가 없습니다. (BBox는 Bounding Box라고 가정합니다.) 그러나 샘플 HTML 코드는 viewBox가 {x, y, width, height}로 정의 된 표준 rect 구조체임을 보여주기 때문에 트릭을 만들었습니다. 각 폴리선의 포인트를 쉽게 계산할 수 있다는 것을 알았으므로이 네 가지 값을 찾을 수있었습니다. – HairOfTheDog

SVG를 자르기위한 적절한 방법은 무엇입니까?

답변

관련 문제