← 返回首页

<feOffset> - SVG | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

<feOffset>

Baseline Widely available

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

<feOffset> は SVG のフィルタープリミティブで、入力画像をオフセットします。入力画像全体は dx と dy 属性で指定した値だけオフセットされます。

In this article

使用コンテキスト

カテゴリー許可されている内容

フィルター構成要素

任意の数、任意の順序の以下の要素。
<animate>、<set>

属性

in
dx
dy

DOM インターフェイス

この要素は SVGFEOffsetElement インターフェイスを実装しています。

例

SVG

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="offset" width="180" height="180">
      <feOffset in="SourceGraphic" dx="60" dy="60" />
    </filter>
  </defs>

  <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    stroke="black"
    fill="green"
    filter="url(#offset)" />
</svg>

結果

仕様書

Specification

Filter Effects Module Level 1
# feOffsetElement

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年4月30日 by MDN contributors.

View this page on GitHub • Report a problem with this content