クリッピング mask 要素について(その5) maskUnits
mask要素に対して、maskUnitsの指定方法を試してみます。
maskUnitsは、maskがどの座標系で影響するかを指定します。
objectBoundingBox（デフォルト）はマスク領域を%指定します。
userSpaceOnUseはマスク領域を座標指定します。
前の投稿のサンプルをもとに、maskUnitsの指定を試してみます。
今回のサンプルはuserSpaceOnUseを指定しているので、座標指定をしています。
全体のサンプルは以下です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.params_box {
font-size : 0.8em;
}
.range {
width: 400px;
}
.code_view {
font-size : 0.8em;
padding: 5px;
background-color: #000000;
color: #ffffff;
}
#code_view1, #code_view2, #code_view3, #code_view4 {
color: #ff0000;
}
</style>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<defs>
<mask
id="test_mask_dom1"
maskUnits="userSpaceOnUse"
x="25%"
y="25%"
width="40%"
height="40%"
>
<path
d = "M 60,50 130,210 190,60 60,50"
fill = "#cccccc"
fill-opacity = "0.4"
/>
<path
d = "M 90,70 160,230 220,80 90,70"
fill = "#cccccc"
fill-opacity = "0.4"
/>
<path
d = "M 120,90 190,250 250,100 120,90"
fill = "#cccccc"
fill-opacity = "0.4"
/>
<path
d = "M 150,110 220,270 280,120 150,110"
fill = "#cccccc"
fill-opacity = "0.4"
/>
</mask>
</defs>
<image href="./sima.jpg" mask="url(#test_mask_dom1)" />
</svg>
<div>
<div class="params_box">
<span>param1 : </span><span class="params" id="range1_value"></span>
<div><input type="range" class="range" id="range1" value="25" max="500"></div>
</div>
<div class="params_box">
<span>param2 : <span class="params" id="range2_value"></span></span>
<div><input type="range" class="range" id="range2" value="25" max="300"></div>
</div>
<div class="params_box">
<span>param3 : <span class="params" id="range3_value"></span></span>
<div><input type="range" class="range" id="range3" value="60" max="500"></div>
</div>
<div class="params_box">
<span>param4 : <span class="params" id="range4_value"></span></span>
<div><input type="range" class="range" id="range4" value="60" max="300"></div>
</div>
</div>
<div class="code_view">
<mask<br />
id="test_mask_dom1"<br />
maskUnits="userSpaceOnUse"<br />
x="<span id="code_view1"></span>"<br />
y="<span id="code_view2"></span>"<br />
width="<span id="code_view3"></span>"<br />
height="<span id="code_view4"></span>"<br />
><br />
<path <br />
d = "M 60,50 130,210 190,60 60,50"<br />
fill = "#cccccc"<br />
fill-opacity = "0.4"<br />
/><br />
<path <br />
d = "M 90,70 160,230 220,80 90,70"<br />
fill = "#cccccc"<br />
fill-opacity = "0.4"<br />
/><br />
<path <br />
d = "M 120,90 190,250 250,100 120,90"<br />
fill = "#cccccc"<br />
fill-opacity = "0.4"<br />
/><br />
<path <br />
d = "M 150,110 220,270 280,120 150,110"<br />
fill = "#cccccc"<br />
fill-opacity = "0.4"<br />
/><br />
</mask>
</div>
<script>
// スライダの要素を取得し、イベントを付与する
let range1_dom = document.getElementById('range1');
let range2_dom = document.getElementById('range2');
let range3_dom = document.getElementById('range3');
let range4_dom = document.getElementById('range4');
// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
range1_dom.addEventListener('input', change_range_slider);
range2_dom.addEventListener('input', change_range_slider);
range3_dom.addEventListener('input', change_range_slider);
range4_dom.addEventListener('input', change_range_slider);
// スライダーを動かした時の処理
function change_range_slider()
{
console.log("range1_dom.value -> " + range1_dom.value);
console.log("range2_dom.value -> " + range2_dom.value);
console.log("range3_dom.value -> " + range3_dom.value);
console.log("range4_dom.value -> " + range4_dom.value);
// マスク要素を取得する
let test_mask_dom1 = document.getElementById('test_mask_dom1');
console.log("test_mask_dom1 -> " + test_mask_dom1);
// マスク要素の x, y, width, height のパラメータを「%指定」で動的に変更する
test_mask_dom1.setAttribute('x' , range1_dom.value);
test_mask_dom1.setAttribute('y' , range2_dom.value);
test_mask_dom1.setAttribute('width' , range3_dom.value);
test_mask_dom1.setAttribute('height', range4_dom.value);
// パラメータ値を出力
let range1_value_dom = document.getElementById('range1_value');
let range2_value_dom = document.getElementById('range2_value');
let range3_value_dom = document.getElementById('range3_value');
let range4_value_dom = document.getElementById('range4_value');
range1_value_dom.innerHTML = range1_dom.value;
range2_value_dom.innerHTML = range2_dom.value;
range3_value_dom.innerHTML = range3_dom.value;
range4_value_dom.innerHTML = range4_dom.value;
// DOM要素 「id="dom_ellipse" 」の cx, cy, rx, ry のパラメータを出力する
let code_view1_dom = document.getElementById('code_view1');
let code_view2_dom = document.getElementById('code_view2');
let code_view3_dom = document.getElementById('code_view3');
let code_view4_dom = document.getElementById('code_view4');
code_view1_dom.innerHTML = range1_dom.value;
code_view2_dom.innerHTML = range2_dom.value;
code_view3_dom.innerHTML = range3_dom.value;
code_view4_dom.innerHTML = range4_dom.value;
}
</script>
</body>
</html>
画面にアクセスすると、画像に対してマスクが4つかかっている出力が確認できます。
また、 x、y、width、height の各パラメータがあり、スライダーで動的に変更できます。
スライダーを変更すると、
<mask id="test_mask_dom1" maskUnits="userSpaceOnUse" x="12" y="25" width="60" height="60" >
mask指定の x、y、width、height の値を0～100までの「座標指定」でマスクされていることがわかります。