web-dev-qa-db-ja.com

CSSを使用してSVG要素を配置する

次のsvgドキュメントを想定します。

_<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20">My text</text>
</svg>
_

今私がやりたいことは、CSSを使用してこのテキストを再配置することです。

_style="dx:20"_とstyle="transform: translate(20)"を追加しようとしました。どちらもfirefoxとsafariでは効果がありません。これらを通常の属性として追加しても正常に機能しますが、実際のコードから位置を分けることはできません。 x、y、left、およびtopをスタイルに設定しても機能しません。

CSSを使用してSVG要素を配置する方法はありますか？

csssvg
36
Yorick Sijsling

次のCSSを使用して、SVGテキストをchromeで移動することができました。

text.identity{
transform: translate(74px,0px);
-ms-transform: translate(74px,0px); /* IE 9 */
-webkit-transform: translate(74px,0px); /* Safari and Chrome */
-o-transform: translate(74px,0px); /* Opera */
-moz-transform: translate(74px,0px); /* Firefox */
}

ただし、Firefoxには問題ありません...

29
pluke

私は修正を求めてここに来ましたが、自分で問題を修正し、共有すると思いました：

_transform: translate(100px, 100px)
_

Internet Explorerを除く最新のすべてのブラウザーで動作するように見えますが、Microsoft Edge（まだリリースされていません）までは非常に残念です。私がテストした要素は次のとおりです。

_<path>
<polygon>
<g>
_

私が経験した唯一の問題は_<text>_要素に関するものであり、そこでの解決策は_<text>_を_<g>_でラップし、それに変換を適用することです。これは、transform: translate()に問題がある、まだテストしていない要素でも機能するはずです。

Internet Explorerの適切なフォールバックは見つかりませんでしたが、代わりに、変換がSVGの機能に不可欠ではないことを確認しました。

21
ryanpither

属性を乱用することにより、CSSだけで具体的にテキスト要素を配置するハッキングの可能性があります 'letter-spacing' for x座標と 'baseline-shift' y座標の場合：

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:10px; /* x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan></text>

'baseline-shift'は、 'tspan'要素にのみ適用できます。したがって、提示されたコードで内部<tspan>が必要になります。ベースラインシフトの正の値は、svgの通常の方向とは反対に、テキストを上に移動します。

「文字間隔」を有効にするには最初の文字が必要なので、.が必要になります。この最初の文字の幅をなくすために、特殊なフォントcssPosAnchorを使用します。この場合、ドットには幅も形状もありません。次の<tspan>は、フォントと文字間隔をさらに復元します。

範囲

適合するすべてのSVG実装で動作するはずです。

ただし、負のx座標には1つの不明確な制限があります。 「文字間隔」属性の仕様では、「値は負の値になる場合がありますが、実装固有の制限がある場合があります。」

適合性

テキスト「方向」の変更は、内側の<tspan>に適用された場合、うまく機能するはずです。

非標準「ライティングモード」を外側<text>に適用する必要があります。それには間違いなく問題があるでしょう。

おそらくより重要な 'text-anchor'値middleおよびendは、次のようにして可能にできます。

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
        <glyph unicode=" " horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:100px; /* x-coordinate */
    Word-spacing:-200px; /* negative double x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    Word-spacing:normal;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
#cssPos {
    text-anchor=middle;
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan> .</text>

‹space›.終了タグの前の<\text>は、マイナスx座標に等しい間隔を生成します。そのため、内部の<tspan>は移動しますが、<text>内のスペースを、あたかもそこにあるかのように保持します。

スペース属性の負の値には実装固有の制限があるため、すべてのクライアントで機能することは保証されていません！

13
Tobias Simon

現時点では、 Shelley Powers によると、彼女の A List Apart Article " 柔軟でスケーラブルで楽しい背景のためのSVGの使用：パートI "および" Part II "-CSSは現在SVGの配置に最適ではありません。実際、SVGをhtml自体に直接埋め込むことなく、Webページに組み込むことは非常に地雷原のようです。

SVGのスタイルとコンテンツを適切に分離できるようにするために、解決策が見つかることを願っています。実際、Powersにはいくつかの回避策があります。現在の問題は、概念/標準の相対的な新しさ（たとえば、.gif あるいは .png...）、悲しいことに。

申し訳ありませんが、より良い回答を提供することはできません。 = /

6
David Thomas

CSSポジショニングを使用します。

index.html

<link href="style.css" rel="stylesheet" />
<div class="parent">
  <div class="child">
    <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><text x="20" y="20">My text</text>
    </svg>
  </div>
</div>

style.css

.parent {
  position: relative;
  height: 1000; /* bigger than your svg */
  width: 1000; /* bigger than your svg */
}

.child {
  position: absolute;
  top: 10px;  /* relative to parent container */
  left: 10px; /* relative to parent container */
}
2
Isaac Pak

polygon r = "7" id = "map_points_55" points = "23,10 15,27 34,16 10,16 31,27" style = "fill：Lime; stroke：purple; stroke-width：0; fill-rule ：nonzero; "

星を動かしたい場合は、points = "33,20 25,37 44,26 20,26 41,37"のようなポイントで10以上に追加します

0
bhaveshvirani63