響應式svg 與 text align

1. 響應式svg:

svg tag加入下列attributes:

preserveAspectRatio="xMinYMin meet"
version="1.1"
viewBox="0 0 400 200"

設定css style:

position: absolute;

包覆的div高度設定用padding-bottom.

2. svg text置中效果, 以下屬性寫在css style:

text-anchor: (horizontal)

start | middle | end

dominant-baseline: (vertical)

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit