15

テキストの text-anchor プレゼンテーション属性に相当する四角形はありますか?

四角形を左右から、または状況に応じて配置できるようにしたい。簡単な計算でできることはわかっていますが、すでに組み込まれているものが存在するかどうか疑問に思っています。

text-anchor プレゼンテーション属性へのリンク... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

4

3 に答える 3

6

私は同じ質問を探していましたが、答えのないこの投稿を見つけました。質問はかなり古いですが、私がしたように誰かがそれを探すかもし​​れないための解決策をここに置きます。

svg rect の (x, y) を指定すると、次のように扱われます。しかし、(x, y) を次のように処理したい場合があります。このアンカー メカニクスが使用されますが、svg にはそのようなものはありません。

変換を使用して (css または属性を使用して)アンカー メカニクスを実現することもできます。これは、transform.translate のパーセント値が適用された形状に対して計算されるため可能ですが、その親ではありません。

このソリューションは今のところ Chrome でのみ機能します

したがって、「ねえ、四角形の中心を (x, y) に配置する」を実現するには、アンカーを (0.5, 0.5) に設定する必要があります。ここでは、変換を使用してどのように行われるかを示します。

.rect-anchor-50-50 {
  /* 
    Precents in translate are calculated relative to
    the applied rectangle, but not its parent.
    Set anchor to (0.5, 0.5) or (center, center).
    */
  transform: translate(-50%, -50%);
}

jsfiddle のコード スニペット

.rect-anchor-0-0 {
  fill: #afafaf;
}
.rect-anchor-50-50 {
  /* 
    precents in translate are calculated relative to
    the applied rectangle, but not its parent
    */
  transform: translate(-50%, -50%);
  fill: #afcfae;
  opacity: 0.75;
}
.group {
  fill: red;
}
svg {
  fill: lightblue;
}
<!-- One can use translate with percents to achieve anchor like mechanics -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <rect fill="lightblue" x="0" y="0" width="100%" height="100%"></rect>

  <!-- Use translate to achieve anchor mechanics -->
  <rect class="rect-anchor-0-0" x="150" y="150" width="200" height="35" />
  <rect class="rect-anchor-50-50" x="150" y="150" width="200" height="35" />

  <!-- Rect x,y position mark for convenience -->
  <circle cx="150" cy="150" r="2" fill="red"></circle>
</svg>

于 2015-11-13T10:27:12.087 に答える
2

他の SVG 要素 ( を含むrect) については、このようなものはありません。仕様を参照してください。自分で位置を計算する必要があります。

于 2013-11-01T14:17:41.193 に答える