このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

SVGGradientElement: gradientTransform プロパティ

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月.

gradientTransformSVGGradientElement インターフェイスの読み取り専用プロパティで、この要素の gradientTransform 属性を反映します。

SVGAnimatedTransformList です。

gradientTransform プロパティへのアクセス

html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <linearGradient id="gradient3" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#gradient3)" />
</svg>
js
// gradientTransform プロパティへのアクセス
const gradient = document.getElementById("gradient3");
console.dir(gradient.gradientTransform.baseVal);
// 出力: SVGTransformList オブジェクト

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGGradientElement__gradientTransform

ブラウザーの互換性