pointsAtZ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
pointsAtZ 属性は、<filter> 要素の primitiveUnits 属性によって定義された座標系における、光源が指し示す点の Z 座標を表します。この際、初期のローカル座標系において、Z 軸の正の方向がコンテンツを閲覧している人の方へ向いていること、および Z 軸上の 1 単位が X 軸および Y 軸上の 1 単位に等しいことを前提としています。
この属性は以下の SVG 要素で使用できます。
例
html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="lighting1" x="0" y="0" width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic">
<feSpotLight x="100" y="100" z="50" pointsAtZ="0" />
</feDiffuseLighting>
</filter>
<filter id="lighting2" x="0" y="0" width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic">
<feSpotLight x="100" y="100" z="50" pointsAtZ="80" />
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#lighting1)" />
<rect x="220" y="0" width="200" height="200" filter="url(#lighting2)" />
</svg>
使用上のメモ
| デフォルト値 | 0 |
|---|---|
| 値 | <number> |
| アニメーション | 可 |
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1 # element-attrdef-fespotlight-pointsatz |