스냅 svg에서 인치를 사용하려면 어떻게해야합니까?

Question

저는 방금 스냅 사진을 가지고 놀기 시작했고 픽셀 대신 인치로 작업하려고했습니다. 이것이 가능합니까? 그렇다면 인치를 사용하여 어떻게 이동합니까? 일부 기능은 인치를 허용하고 일부 기능은 허용하지 않는 것으로 보입니까?

// This works 
var s = Snap("1.5in", "1.5in"); 

// This works 
s.rect("0in", "0in", "1.5in", "1.5in").attr({ 
    stroke: "#f00", 
    fill: "transparent" 
}); 

// This works 
s.path("M0,144L144,0").attr({ 
    stroke: "#f00" 
}); 

// This fails (Error: Invalid value for <path> attribute d="M0in,0inL1.5in,1.5in") 
s.path("M0in,0inL1.5in,1.5in").attr({ 
    stroke: "#f00" 
}); 

Answer 1

일부 SVG 값은 단위가있는 길이가 아닌 원시 숫자 (SVG 사용자 좌표로 해석 됨) 만 허용합니다. 경로 "d"속성은 그 중 하나입니다.

snap.svg 문제가 아니기 때문에 기본 SVG 요소가 어떻게 작동하는지 알 수 있습니다.

가장 쉬운 방법은 전환 요소를 직접 만드는 것입니다. SVG 사용자 좌표의 초기 값은 1 사용자 단위가 하나의 CSS "픽셀"(픽셀) 단위와 같습니다. CSS 표준에 따르면 "px"단위는 "in"(인치) 단위의 1/96과 정확하게 동일합니다. 변환 또는 viewBox 특성을 사용하여 SVG의 크기를 조절하면 그에 따라 length units 크기가 모두 적용되므로 비율이 일정하게 유지됩니다.

따라서, "M0in,0inL1.5in,1.5in"의 경로와 동등한를 만들려면 96 각 숫자를 곱 것하고 함께 문자열을 연결 :

s.path("M0,0L" + 1.5*96 + "," + 1.5*96).attr({ 
    stroke: "#f00" 
}); 

를 작성하는 길고 복잡한 경로를 가지고 있다면, 그것은 가치 Array.join("")을 언급하면 ​​+ 연산자보다 긴 문자열 및 숫자 목록을 하나의 문자열로 결합하는 것이 더 효율적입니다.

CSS/SVG "in"단위가 정확히 인치의 화면으로 표시되지는 않습니다. 문서를 인쇄하는 경우 매우 정확해야합니다. 물론 SVG를 스케일링하거나 변형하는 경우에는 1 인치에 근접하지 않을 수도 있습니다.