어린이가 "슈퍼"SVG 경로를 정의 할 수 있습니까? <path>?

Question

SVG는 암묵적으로 또는 명시 적으로 닫히거나 열 때 경계를 정의하는 여러 경로 덕분에 모양을 정의 할 수 있습니다. 일부 색상이 명확하게 각 경로가 아닌 전체로, 개별적으로 간주됩니다 보여줍니다으로 그룹의

<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" 
    height="200" 
    viewBox="0 0 120 120" 
    version="1.1"> 
    <defs> 
    <path d="M 20,20 40,20 40,60 100,60 100,100" style="stroke:red;stroke-width:3px;" id="Border1" /> 
    <path d="M 100,100 L 20,100 20,20" style="stroke:blue;stroke-width:2px;" id="Border2" /> 
    </defs> 
    <g style="fill: green"> 
    <use xlink:href = "#Border1"/> 
    <use xlink:href = "#Border2"/> 
    </g> 
</svg> 

충전물 :

나는이 시도.

달성 방법이 있는지 아는 사람이 있습니까?

1. 는 individualy
2. 이 국경에 의해이 없습니다

Answer 1

번호를 어떤 모양을 정의 할 각 경계를 조작 할 수합니다.

이와 비슷한 것이 SVG 작업 그룹에서 제안되고 논의되었습니다. 그러나 그것이 지금까지 얻은 것까지입니다.

경계 경로 집합에서 영역을 빌드하기 위해 일부 자바 스크립트를 작성할 수 있습니다.

var regions = document.querySelectorAll("path.region"); 
 
regions.forEach(function(region) { 
 
    // Get the value of the "data-paths" attribute 
 
    var borderIds = region.dataset.borders.split(','); 
 
    var regionPath = ""; 
 
    // Find all the border paths for this region, and add them to the region's path data 
 
    borderIds.forEach(function(id) { 
 
    var borderDef = document.getElementById(id); 
 
    var d = borderDef.getAttribute("d"); 
 
    if (regionPath === "") { 
 
     // First border in region 
 
     regionPath = d; 
 
    } else { 
 
     // Subsequent borders need their first 'M' changed to an 'L' to keep the path contiguous 
 
     regionPath += 'L' + d.substr(1); 
 
    } 
 
    }) 
 
    region.setAttribute("d", regionPath); 
 
});

<svg 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="200" 
 
    height="200" 
 
    viewBox="0 0 120 120" 
 
    version="1.1"> 
 
    <defs> 
 
    <path d="M 20,20 40,20 40,60 100,60 100,100" style="stroke:red;stroke-width:3px;" id="Border1" /> 
 
    <path d="M 100,100 L 20,100 20,20" style="stroke:blue;stroke-width:2px;" id="Border2" /> 
 
    </defs> 
 
    <path style="fill: green" class="region" data-borders="Border1,Border2"/> 
 
</svg>

하지 그 코드 마지막 하나가 완성 경우 다음 보더 경로, 국경의 목록에서 시작하면 작동합니다.

또한이 코드는 브라우저가 SVG 요소의 dataset 특성을 지원한다고 가정합니다. 구형 브라우저를 지원해야하는 경우 대신 getAttribute("data-borders")을 사용해야 할 수도 있습니다.