2012-10-23 2 views
1

데이터를 점하기 위해, 뭔가 같은 :다스 려 나가 폴리 라인을 그립니다 SVG가 SVG

<polyline points="500 10 500 20 500 30 500 40 500 
    50 500 60 500 70 500 80 500 90 500 
    101 500 111 500 121 500 131 500 141 500 
    151 500 161 500 171 500 181 500 191 500 
    202 500 212 500 222 500 232 500 242 500 
    252 500 262 500 272 500 282 500 292 500 
    303 500 313 500 323 500 33 ... "/> 

나는 다음과 같은 이유로 속성에 점을 지정 피하기 위해 싶습니다

  1. 점의 수는 매우 많아서 (1,000의 수) 속성에 포함 시키면 SVG를 읽기와 처리가 어렵게 만듭니다.

  2. 이 점은 동일한 SVG에서 여러 번 사용되었으므로 그려진 각 선을 반복해서 나타내지 않으려합니다.

텍스트의 경우 <tref>을 사용하여 다른 곳에서 정의 된 텍스트를 참조 할 수 있습니다. 포인트에 대해서도이 작업을 수행 할 수 있습니까?

답변

1

당신은 <use/> (specification)의 요소를 활용할 수 있습니다 :

<defs> 
    <polyline points="..." id="foo" /> 
</defs> 
<use xlink:href="#foo" x="100" y="100" stroke="#ff0000" /> 

그러나 속성에서 포인트 데이터를 이동하는 일반 SVG의 방법이 없습니다. 이 작업을 수행하려면 다른 기술, JavaScript, XSLT 또는 기타 사전 처리 또는 사후 처리를 사용해야합니다.

편집 : 그것은 예측 이후, 난 강력이 솔루션을 억제, 그러나

<!DOCTYPE svg [ 
<!ENTITY points "[your points go here]"> 
]> 
<svg> 
    <polyline points="&points;" /> 
</svg> 

: 집, 아이들에서 시도하지 마십시오,하지만 당신은 다른 곳에서 포인트를 저장하기 위해 XML 엔터티를 사용할 수 있습니다 , 그 처리 소프트웨어는 이것을 질식시킬 것입니다. HTML5 컨텍스트가 아닌 한 브라우저는 괜찮을 것이라고 생각하지만 Inkscape, Adobe Illustrator, Batik 등과 같은 다른 브라우저는이 기능을 제대로 수행하지 못합니다.

+0

이것이 SVG에서 얻을 수있는 최선이라고 생각합니다. 포인트는 애트리뷰트에 머물러 있어야하지만 최소한이 애트리뷰트를 애트리뷰트간에 공유 할 수는 있습니다. –

+0

네, 그렇습니다. XML 기술 (Google은 "XML 엔터티 정의"를 위해)을 사용하여 다른 곳에 포인트를 저장할 수 있지만 적어도 하나의 처리 뷰어에서 문제가 발생합니다. 그리고 HTML5에서 그 트릭을 수행 할 수 없습니다. – Boldewyn

0

SVG에서이 작업을 수행하는 방법에 대해 들어 보지 못했습니다.

수동으로 SVG 코드를 생성하는 대신이 스크립트를 작성하는 것이 좋습니다. 이렇게하면 SVG에 더 많은 구조를 넣을 수 있습니다. SVG는 실제로 생성되는 것이지 손으로 코딩되는 것이 아닙니다.

예에서 두 개의 루프 만 있으면됩니다.

1

어쩌면 < 경로가 더 읽기 쉽고 컴팩트합니까? hv 명령 (및 해당 절대 값이 HV)이 예제를 보게됩니다.

관련 문제