回答編集履歴

1

スケーリングについての補足

2018/10/14 09:31

投稿

karamarimo
karamarimo

スコア2551

test CHANGED
@@ -15,3 +15,21 @@
15
15
 
16
16
 
17
17
  [JSFiddle Demo](https://jsfiddle.net/karamarimo/7nfzsLvq/)
18
+
19
+
20
+
21
+ EDIT: `viewBox`でSVG内の座標系での表示範囲を指定すると、CSSの`width`と`height`などでスケーリングができるようになります。
22
+
23
+ ![イメージ説明](6d2c97f2c540c7746e710387507b9e6e.png)
24
+
25
+ ```html
26
+
27
+ <svg style="width:150px;height:200px" preserveAspectRatio="none" viewBox="0 0 100 100">
28
+
29
+ <polygon points="0,100 50,0 100,100" style="fill:purple;cursor:pointer" />
30
+
31
+ </svg>
32
+
33
+ ```
34
+
35
+ [JSFiddle Demo 2](https://jsfiddle.net/karamarimo/7nfzsLvq/3/)