SVGFEDropShadowElement: in1 プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

in1 は SVGFEDropShadowElement インターフェイスの読み取り専用プロパティで、この <feDropShadow> 要素の in 属性を反映します。

値

SVGAnimatedString オブジェクトです。

例

この例では、フィルター内に 2 つの <feDropShadow> 要素が定義されており、それぞれ異なる in 属性が設定されています。

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="drop-shadow-filter">
      <!-- 1 つ目のドロップシャドウは SourceGraphic に適用 -->
      <feDropShadow
        in="SourceGraphic"
        dx="10"
        dy="10"
        stdDeviation="5"
        flood-color="red" />
      <!-- 2 つ目のドロップシャドウは BackgroundImage に適用 -->
      <feDropShadow
        in="BackgroundImage"
        dx="-10"
        dy="-10"
        stdDeviation="5"
        flood-color="blue" />
    </filter>
  </defs>
  <!-- 赤い影をつけた矩形 -->
  <rect
    x="20"
    y="20"
    width="100"
    height="100"
    fill="red"
    filter="url(#drop-shadow-filter)" />
  <!-- 青い影をつけた円 -->
  <circle
    cx="100"
    cy="100"
    r="50"
    fill="blue"
    filter="url(#drop-shadow-filter)" />
</svg>

in 属性は次のようにアクセスできます。

const dropShadows = document.querySelectorAll("feDropShadow");

console.log(dropShadows[0].in1.baseVal); // 出力結果: "SourceGraphic"
console.log(dropShadows[1].in1.baseVal); // 出力結果: "BackgroundImage"