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

View in English Always switch to English

SVGTextPositioningElement: rotate プロパティ

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

rotateSVGTextPositioningElement インターフェイスの読み取り専用プロパティで、指定された要素の rotate 属性で指定されたとおりに、個々のテキスト文字の回転を反映します。

SVGAnimatedNumberList オブジェクトです。

次の SVG があったとします。

html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20" rotate="45">Hello</text>
  <text x="50" y="50" rotate="90">World</text>
</svg>

rotate 属性にアクセスできます。

js
const texts = document.querySelectorAll("text");

console.log(texts[0].rotate.baseVal); // 出力: 45
console.log(texts[1].rotate.baseVal); // 出力: 90

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGTextPositioningElement__rotate

ブラウザーの互換性

関連情報