5

SVGテキストを回転させようとしています。xsltからphp関数を呼び出すことで、テキストの位置を%、つまり15%として取得します。問題は、% を使用して SVG オブジェクトを回転できないことです。代わりに数字を使用すると機能します。以下に、問題を簡略化して示します。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full">
  <text x="50%" y="50%" transform="rotate(-90 50% 50%)">rotateMe</text>
  <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>

この写真は私のブラウザ画面の真ん中にあります 最初のポイント

そして、私はそれが次のように見えることを望みます: 目標

しかし、％のために機能しません

transform="rotate(-90 **50% 50%**)"

座標に % を使用する必要があります。私の問題に対するアイデアや解決策はありますか?

よろしくお願いします。

4

1 に答える 1

4

<svg>内部要素を使用して座標を変換できます。以下の例は、Firefox の「このように見えるようにしたい」ビットマップに従って表示されます。

使用しているブラウザーでテキストが表示されない場合は、内側の<svg>要素に overflow="visible" を追加して、最終的な場所を確認できるようにしてください。すべてのブラウザーがdominant-baseline 属性をサポートしているわけではないので、代わりにテキストの y 属性をいじる必要があるかもしれません。 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="50%" y="50%" width="100" height="100">
      <text text-anchor="end" dominant-baseline="text-before-edge" transform="rotate(-90 0 0)">rotateMe</text>
  </svg>
  <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>
于 2012-08-24T12:33:28.567 に答える