SVGについて – グラデーションについて(その4)
パターンについて
前回のサンプルに対して、パターンを試してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style type="text/css">
.params {
float: left;
}
.params_box {
display: flex;
}
.param_title {
font-weght: bold;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient
id="radial_gradient1"
>
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#fff"/>
</radialGradient>
<pattern
id="test_pattern1"
x="0"
y="0"
width="0.3"
height="0.4"
>
<circle
id="test_circle1"
cx="23"
cy="23"
r="25"
fill="url(#radial_gradient1)"
/>
</pattern>
</defs>
<rect
x = "0"
y = "0"
width = "150"
height = "150"
fill = "url(#test_pattern1)"
/>
</svg>
<div>
<span class="param_title">patternタグのパラメータ</span>
<div class="params_box">
<input type="range" id="pattern_x" value="0">
<div>x:</div>
<div class="params" id="test_pattern_x"></div>
</div>
<div class="params_box">
<input type="range" id="pattern_y" value="0">
<div>y:</div>
<div class="params" id="test_pattern_y"></div>
</div>
</div>
<div>
<span class="param_title">circleタグのパラメータ</span>
<div class="params_box">
<input type="range" id="circle_cx">
<div>cx:</div>
<div class="params" id="test_circle_cx"></div>
</div>
<div class="params_box">
<input type="range" id="circle_cy">
<div>cy:</div>
<div class="params" id="test_circle_cy"></div>
</div>
<div class="params_box">
<input type="range" id="circle_r">
<div>r :</div>
<div class="params" id="test_circle_r"></div>
</div>
</div>
<script>
// スライダpattern_xの要素を取得し、イベントを付与する
let pattern_x_dom = document.getElementById('pattern_x');
pattern_x_dom.addEventListener('input', function(e) {
console.log("pattern_x_dom.value -> " + pattern_x_dom.value);
// パターン内の円情報(DOM)を取得する
let test_pattern1_dom = document.getElementById('test_pattern1');
console.log("test_pattern1_dom -> " + test_pattern1_dom);
// SVG要素のcxを変更する
test_pattern1_dom.setAttribute('x', pattern_x_dom.value);
// 画面出力
let test_pattern_x_dom = document.getElementById('test_pattern_x');
test_pattern_x_dom.innerHTML = pattern_x_dom.value + '<br />';
});
// スライダpattern_yの要素を取得し、イベントを付与する
let pattern_y_dom = document.getElementById('pattern_y');
pattern_y_dom.addEventListener('input', function(e) {
console.log("pattern_y_dom.value -> " + pattern_y_dom.value);
// パターン内の円情報(DOM)を取得する
let test_pattern1_dom = document.getElementById('test_pattern1');
console.log("test_pattern1_dom -> " + test_pattern1_dom);
// SVG要素のcxを変更する
test_pattern1_dom.setAttribute('y', pattern_y_dom.value);
// 画面出力
let test_pattern_y_dom = document.getElementById('test_pattern_y');
test_pattern_y_dom.innerHTML = pattern_y_dom.value + '<br />';
});
// スライダcircle_cxの要素を取得し、イベントを付与する
let circle_cx_dom = document.getElementById('circle_cx');
circle_cx_dom.addEventListener('input', function(e) {
console.log("circle_cx_dom.value -> " + circle_cx_dom.value);
// パターン内の円情報(DOM)を取得する
let test_circle1_dom = document.getElementById('test_circle1');
console.log("test_circle1_dom -> " + test_circle1_dom);
// SVG要素のcxを変更する
test_circle1_dom.setAttribute('cx', circle_cx_dom.value);
// 画面出力
let test_circle_cx_dom = document.getElementById('test_circle_cx');
test_circle_cx_dom.innerHTML = circle_cx_dom.value + '<br />';
});
// スライダcircle_cyの要素を取得し、イベントを付与する
let circle_cy_dom = document.getElementById('circle_cy');
circle_cy_dom.addEventListener('input', function(e) {
console.log("circle_cy_dom.value -> " + circle_cy_dom.value);
// パターン内の円情報(DOM)を取得する
let test_circle1_dom = document.getElementById('test_circle1');
console.log("test_circle1_dom -> " + test_circle1_dom);
// SVG要素のcxを変更する
test_circle1_dom.setAttribute('cy', circle_cy_dom.value);
// 画面出力
let test_circle_cy_dom = document.getElementById('test_circle_cy');
test_circle_cy_dom.innerHTML = circle_cy_dom.value + '<br />';
});
// スライダcircle_rの要素を取得し、イベントを付与する
let circle_r_dom = document.getElementById('circle_r');
circle_r_dom.addEventListener('input', function(e) {
console.log("circle_r_dom.value -> " + circle_r_dom.value);
// パターン内の円情報(DOM)を取得する
let test_circle1_dom = document.getElementById('test_circle1');
console.log("test_circle1_dom -> " + test_circle1_dom);
// SVG要素のcxを変更する
test_circle1_dom.setAttribute('r', circle_r_dom.value);
// 画面出力
let test_circle_r_dom = document.getElementById('test_circle_r');
test_circle_r_dom.innerHTML = circle_r_dom.value + '<br />';
});
</script>
</body>
</html>
画面にアクセスすると、放射状のグラデーションの円が、パターン表示されたものが表示されます。
また、画面内のパラメータは、patternのDOM要素と、circleのDOM要素を、パラメータを変化させることにより、
動的に描画結果を見られるように設置しています。
初期状態から、各パラメータを変えることにより、各パラメータがどのように描画に影響するかが確認できます。