1

下記SVGタグ(抜粋)があるのですが、これを指定要素(高さ400px、横幅250px)一杯に表示させるためには、どうすれば良いでしょうか?
・viewBoxを指定するためには、pathタグ全体の大きさを知る必要がある?
・それはどこから判断???

<svg viewBox="0 0 ? ?">
    <path d="M 500a 10,20 … " transform="rotate(-20 500 280)"></path>
    <path d="M 500a 20,30 … " transform="rotate(-7 500 280)"></path>
    <path d="M 100a 10,20 … " transform="rotate(20 100 280)"></path>
    <path d="M 100a 20,30 … " transform="rotate(7 100 280)"></path>
</svg>
4
  • SVGは手書きで作成したのでしょうか?Inkscapeとかでしたら自動でviewboxが表示どおりに指定されると思うのですが。
    – packet0
    Commented 2016年11月7日 15:15
  • インターネットで公開されていたSVGを参考にしています。(タグ内容からIllustratorで作成されたものだと思われるのですが、)そのSVGの一部分だけを、指定要素になるべく大きく表示させたいと思い、質問しました。「自動でviewboxが表示どおりに指定される」ということは、「Inkscape」なり「Illustrator」で、該当部分(欲しいSVGの一部)を読み込んで出力すれば、自動でviewboxが作成される、という感じでしょうか?
    – re9
    Commented 2016年11月8日 12:34
  • 1
    そんな感じです。Inkscapeで読み込み、保存すれば自動でviewboxは指定されたと思います。サイズは後ろに表示されてるキャンパスっぽいものと同じになるでそれはDocument Propertyあたりで要素に合わせれたと思います。ただviewboxの座標は表示する範囲をpxで指定してるだけなので、適当にしてもいけそうな気もしますが。あと表示時にアスペクト比を無視したい場合は<svg>preserveAspectRatio="none"も必要です(これは自動では付かなかったと思います)。
    – packet0
    Commented 2016年11月11日 13:08
  • なるほど。Inkscapeをこれまで触ったことがなかったたため、この機会に試してみようと思います、情報ありがとうございました。
    – re9
    Commented 2016年11月13日 3:58

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。