前提・実現したいこと
SVGを微調整したいのですが、複雑すぎてわかりません。
こちらに書いてある通りに変更したいのです。
https://jsfiddle.net/3aq7y1bv/
要は、リツイートマークと保存マークについて、矢印や棒を統一したいということになります。
MやLなどSVGの構造は一部理解できても、いざ思う通りにはなかなか設計できず…。
どなたか、もしわかったらお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
ベストアンサー
コマンドを1つずつ順番に理解していけば意外と簡単でした。(勉強になりました)
片方だけやってみたので、参考にしてください。
完成品は以下になります。
http://yutamptech.com/svg.html
※自分の勉強用のサイトなので、1週間で削除します。
もう片方(リツイートアイコン)は自分で考えてください。自分で考えてください。(少なくとも私にはその気力はありません)
各指示子については以下のサイトが参考になりました。
https://takaya-com.jp/archives/2015/10/svgpart2/
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d
では、簡単に解説します。(間違ってたらごめんなさい)
以下のコードは人間が読みやすいように整形したコードです。
コマンドごとに改行し、適宜スペースを空けました。
HTML
1<svg class="icon icon-in"> 2<use xlink:href="#icon-in"> 3<symbol id="icon-in" viewBox="0 0 16 16"> 4<path d=" 5M 15 7 6c -0.553 0 -1 0.448 -1 1 7v 6 8h -12 9v -6 10c 0 -0.552 -0.447 -1 -1 -1 11s -1 0.448 -1 1 12v 7 13c 0 0.552 0.447 1 1 1 14h 14 15c 0.553 0 1 -0.448 1 -1 16v -7 17c 0 -0.552 -0.447 -1 -1 -1 18z 19M 9 7 20v -6.122 21c 0 -0.485 -0.447 -0.878 -1 -0.878 22s -1 0.393 -1 0.878 23v 6.122 24h -3 25l 4 4 4 -4 26h -3 27z 28"></path> 29</symbol> 30</use> 31</svg>
図を見れば明白ですが、コードにおいても「凵」と「↓」に分解できることが分かります。
それぞれ一行ずつ見ていきましょう。
・「凵」を描画します。
No. | コマンド | 説明 |
---|---|---|
0 | M 15 7 | (15,7)の座標に移動 |
1 | c -0.553 0 -1 0.448 -1 1 | (15,7)から[-1,1]まで三次ベジェ曲線を引きます。(指示子が小文字の時は相対距離を表します。以後[]は相対距離を表すこととします。) |
2 | v 6 | (14,8)から垂直方向に[6]だけ線を引きます。 |
3 | h -12 | (14,14)から水平方向に[-12]だけ線を引きます |
4 | v -6 | (2,14)から垂直方向に[-6]だけ線を引きます。 |
5 | c 0 -0.552 -0.447 -1 -1 -1 | (2,8)から[-1,-1]まで三次ベジェ曲線を引きます。 |
6 | s -1 0.448 -1 1 | (1,7)から[-1,1]まで三次ベジェ曲線を引きます。 |
7 | v 7 | (0,8)から垂直方向に[7]だけ線を引きます。 |
8 | c 0 0.552 0.447 1 1 1 | (0,15)から[1,1]まで三次ベジェ曲線を引きます。 |
9 | h 14 | (1,16)から水平方向に[14]だけ線を引きます。 |
10 | c 0.553 0 1 -0.448 1 -1 | (15,16)から[1,-1]まで三次ベジェ曲線を引きます。 |
11 | v -7 | (16,15)から垂直方向に[-7]だけ線を引きます。 |
12 | c 0 -0.552 -0.447 -1 -1 -1 | (16,8)から[-1,-1]まで三次ベジェ曲線を引きます。 |
End | z | (15,7)でパスを閉じます。(これで「凵」が完成しました。) |
丸くなっている部分は①、⑤、⑥、⑧、⑩、⑫の6か所ですので、この箇所をLineToに置き換えればいいことが分かります。
①なら”c -0.553 0 -1 0.448 -1 1”→”l -1 1”といった感じです。
・「↓」を描画します。
No. | コマンド | 説明 |
---|---|---|
0 | M 9 7 | (9,7)の座標に移動 |
1 | v -6.122 | (9,7)から垂直方向に[-6.122]だけ線を引きます。 |
2 | c 0 -0.485 -0.447 -0.878 -1 -0.878 | (9,0.878)から[-1,-0.878]まで三次ベジェ曲線を引きます。 |
3 | s -1 0.393 -1 0.878 | (8,0)から[-1,0.878]まで三次ベジェ曲線を引きます。 |
4 | v 6.122 | (7,0.878)から垂直方向に[6.122]だけ線を引きます。 |
5 | h -3 | (7,7)から水平方向に[-3]だけ線を引きます。 |
6 | l 4 4 4 -4 | (4,7)から[4,4]まで直線を引いた後、[4,-4]まで直線を引きます。(同じ動作が連続する場合、指示子は省略できます。”l 4 4 l 4 -4”と同じ意味です。) |
7 | h -3 | (12,7)から水平方向に[-3]だけ線を引きます。 |
End | z | (9,7)でパスを閉じます。(これで「↓」が完成しました。) |
丸くなっている部分は②、③の2か所だけですので、この箇所をLineToに置き換えればいいことが分かります。
(9,0.878)から(7,0.878)に一直線に引けばいいので、②と③をまとめて"l 7,0.878"に置き換えればOKです。
最後に一言。
絶対、SVGエディターで1から作ったほうが早いです。
投稿2019/07/29 03:20
編集2019/07/29 10:32総合スコア182
0
c と s はベジェ曲線を表します。
c は x1 y1 x2 y2 x y、
s は x2 y2 x y
のパラメーターをとって最終的に座標 x y に移動するので、曲線が不要であれば単純に l x y に置き換えたらいいのではないでしょうか。
https://triple-underscore.github.io/SVG11/paths.html#PathDataCubicBezierCommands
https://developer.mozilla.org/en-US/docs/User:Jt_Sandbox/Curves_in_Paths
投稿2019/07/16 07:57
総合スコア13749
0
こちらにSVGの詳細がかかれてあります。
こちらを見て理解できなければ思う通りに設計することは
できないのであきらめるしかないです。
https://developer.mozilla.org/ja/docs/Web/SVG
投稿2019/07/13 00:40
総合スコア2937
0
コードで修正するのが、難しいのであればillustratorで編集してからSVGとして吐き出すという方法もあります。
投稿2019/07/29 01:52
総合スコア716
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/07/29 08:23
2019/07/31 12:34