質問編集履歴
4
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
3
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
### 発生している問題・エラーメッセージ
|
|
6
6
|
|
|
7
|
-
text要素にどのような工夫をすれば
|
|
7
|
+
text要素を複数配置したときにどのような工夫をすればインライン要素を並べたときのような横並び+折り返しが実現できるかがわかりません
|
|
8
8
|
|
|
9
9
|
### 該当のソースコード
|
|
10
10
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>SVG!</text><text x='0' y='15' fill='red' font-size='20'>SVG!</text></svg>");
|
|
25
25
|
}
|
|
26
26
|
```
|
|
27
|
-
|
|
27
|
+
下のようにspan要素を複数置いたときのような動きが実現できませんでした
|
|
28
28
|
また、上の方法ではテキストの横幅などがpxで指定されていますがテキストが多いとはみ出して見えなくなってしまいます
|
|
29
29
|
これについても、svg要素のwidthを100%にしてみましたが、要素が重なるだけで改善しませんでした
|
|
30
30
|
```HTML
|
2
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
1
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -40,4 +40,8 @@
|
|
|
40
40
|
<span>テキストテキスト</span>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
どのようにすれば、上のようなspan要素と同じインラインの動きをSVGで実現できますか？
|
|
43
|
+
どのようにすれば、上のようなspan要素と同じインラインの動きをSVGで実現できますか？
|
|
44
|
+
|
|
45
|
+
参考
|
|
46
|
+
[http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_08.htm](http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_08.htm)
|
|
47
|
+
[http://wisdom.sakura.ne.jp/web/xml/svg/svg4.html](http://wisdom.sakura.ne.jp/web/xml/svg/svg4.html)
|