"スーパー" 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. ありませんそれらの境界によって

Answer 1

番号をいくつかの形状を定義するために

individualy各境界を操作することができるようにします。

このようなことが、SVGワーキンググループで提案され、議論されています。しかし、これまでのところそれまでのところです。

境界パスのセットから領域を構築するためにJavascriptを書くことができます。

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>

ないようにコードだけで、最後の1が終了したところ次のボーダーパスは、国境のリストに、起動した場合に動作します。

また、このコードでは、ブラウザがSVG要素のdataset属性をサポートしていることを前提としています。古いブラウザをサポートする必要がある場合は、代わりにgetAttribute("data-borders")を使用する必要があります。