동적으로 생성 된 SVG에서 스프라이트 사용?

Question

SVG 요소를 생성하고 개별 png 대신 스프라이트 시트를 사용하는 기존 자바 스크립트를 사용하려고합니다.

지금이 단일 이미지 파일에 이미지, "경로"점을 생성하는 일반적인 형식입니다 :

var hsOwnerDocument = $$(this).getDocument(); 
var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", "image"); 
element.id = id; 
element.setAttributeNS(null, "x", left); 
element.setAttributeNS(null, "y", top); 
element.setAttributeNS(null, "width", width); 
element.setAttributeNS(null, "height", height); 
element.setAttributeNS("http://www.w3.org/1999/xlink", "href", path); 

내가 SVG 또는 스프라이트와 아무 경험이없는,하지만 내 제한된 연구에서 두 가지 접근법이있는 것 같습니다. 스프라이트 시트를 가리 키도록 배경 이미지를 표시하고 CSS로 필요한 부분을 가져 오거나 이미지의 클립 경로 속성을 사용하십시오. 나는 내 문제를 고려해 어느 것이 적절한 지 확신하지 못한다. 그러나 불행히도 나는 기대했던대로 작동하지 않는 것으로 보인다. 클립 경로가 이미지 요소에 적용되지 않는 것 같아요. 대신 배경 이미지를 사용하면 사실 전혀 표시되지 않습니다.

편집 : clip-path를 사용하여 방금 만든 이미지보다 작은 임의의 사각형을 만들고 위 이미지에 적용하여 필요한만큼 영역을 필터링할지 확인합니다.

var hsOwnerDocument = $$(this).getDocument(); 
    var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", "clip-path"); 
    element.id = "testClip"; 
    element.setAttributeNS(null, "id", "testClip"); 
    var rect = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", "rect"); 
    rect.setAttributeNS(null, "x", 4); 
    rect.setAttributeNS(null, "y", 4); 
    rect.setAttributeNS(null, "width", 20); 
    rect.setAttributeNS(null, "height", 20); 
    element.appendChild(rect); 

는 I은 이전 코드에 다른 광고를 추가하여 속성과 클립 경로를 적용 :

element.setAttributeNS(null,"style", "clip-path:url(#testClip)"); 

클립 경로 요소 및 하위 직사각형 모두 생성 태그 내에 존재하고 I 내 이미지 요소의 속성을 확인하십시오 ...하지만 전체 이미지가 계속 표시됩니다.

Answer 1

이 줄은 잘못되었습니다.

var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", 
               "clip-path"); 

clipPath 요소를 만들어야합니다.

var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", 
               "clipPath"); 

속성은 clip-path이고, 요소는 clipPath입니다.