jquery SVG 플러그인 및 위치 지정

SVG를 기반으로하는 배경에서 작업하고 있습니다.jquery SVG 플러그인 및 위치 지정

저는 정적 인 SVG를 만들었 기 때문에 제 프로토 타입의 그래픽 모양을 미세 조정할 수있었습니다. 다음은 그래픽 결과입니다 printscreen of my svg background

이제는 내 svg 코드를 jquery SVG plugin으로 변환하는 중입니다. 나중에 요소를 애니메이션으로 적용하고 상호 작용을 추가 할 수 있습니다.

필자는 플러그인 설명서에 깊이 관여하고 있지만 아직 얻지 못하는 부분이 있습니다. 그룹의 하위 요소 위치 지정은 그룹 요소와 관련이 없습니다.

내 정적 SVG 선소는 G 소자에 대해 위치되는 방식

<g class="user" id="user-server" transform="translate(900,50)"> 
    <g class="label"> 
    <text transform="matrix(1 0 0 1 1 8.4399)" class="user-name">[ you ]</text> 
     <line x1="1" y1="20" x2="200" y2="20" style="stroke-dasharray: 1,2; stroke: black; stroke-width: 0.2;"/> 
    </g> 
</g>

참고.

내 jquery.svg 코드

function iniSVG(svg){ 
    var gServer = svg.group({class_: 'user', 'id_': 'user-server'}); 
    var gServerLabel = svg.group(gServer,{class_:'label'}); 
    var gServerText = svg.text(gServerLabel, 52, 76, '[ pixeline ]',{class_:'user-name'}); 
    svg.line(gServerLabel,1,20,200,20, {strokeDashArray: '1,2', stroke:'black',strokeWidth:1, class_:'label-line'}); 
}

이 절대적 (화면 표시 영역의 100 % 임) 전체 SVG 캔버스에 위치하는 광고를 렌더링한다.

gServerLabel 그룹과 관련해서는 안됩니까? 아니면 내가 잘못하고있는 게 있니?

출처

2012-02-01 pixeline

이 있습니다. 나는 라인이 900 x 50으로 변환되는 방법을 파기 할 수 있습니다. 그러나 코드에서 볼 수 있습니다. gServer와 연관된 해당 번역을 볼 수 없습니다. 어쩌면 나는 osmething을 놓치고있다. – dsummersl

gServer는 그룹 요소이며 그룹 요소는 CSS에 배치됩니다. 그래서 나는 CSS에서 그것을 설정했고, 그것은 잘 동작합니다. – pixeline

왜 편집기를 사용하여 변환을 없애고 코딩 작업을 더 쉽게합니까? Inkscape에서 복사하여 붙여 넣을 수 있지만 다른 메뉴 옵션이 있습니다. 원래 SVG의

출처

2012-02-02 00:38:58 Chasbeen

죄송합니다. 답변을 잘 모르겠습니다. 나는 당신이 inkscape에서 그려서 xml 출력을 사용하도록 제안했다고 생각합니다. 위치가 동적 일 때 여기에 적합하지 않습니다. – pixeline

jquery SVG 플러그인 및 위치 지정

답변

관련 문제