xml
1<svg width="197px" height="56px" viewBox="0 0 197 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2 <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --> 3 <title>edit_box</title> 4 <desc>Created with Sketch.</desc> 5 <defs></defs> 6 <g id="2.Flow" fill="none" fill-rule="evenodd"><!--内部色なし--> 7 <g id="flow_10" transform="translate(-286.000000, -426.000000)" stroke="#2476BC"> 8 <g id="main" transform="translate(261.000000, 334.000000)"> 9 <g id="edit_box" transform="translate(25.000000, 92.000000)"> 10 <rect id="Rectangle-10" stroke-width="2" x="4" y="5" width="189" height="46"></rect> 11 <rect id="Rectangle-4" fill="#FAFAFA" x="189.5" y="0.5" width="7" height="7"></rect> 12 <rect id="Rectangle-4-Copy" fill="#FAFAFA" x="189.5" y="48.5" width="7" height="7"></rect> 13 <rect id="Rectangle-4-Copy-2" fill="#FAFAFA" x="0.5" y="47.5" width="7" height="7"></rect> 14 <rect id="Rectangle-4-Copy-3" fill="#FAFAFA" x="0.5" y="0.5" width="7" height="7"></rect> 15 <rect id="Rectangle-4-Copy-4" x="90.5" y="24.5" width="7" height="7" rx="3.5"></rect> 16 </g> 17 </g> 18 </g> 19 </g> 20 </svg>
このコードを解読したいです。
上から順に読んでるのですが
ここまではなんとなくわかったのですが、それ以降が分かりません。
グループの位置を指定する方法が translate だというのは分かったのですが、マイナスとかかが出てくる意味がよく分からないのと、なんでこんなにグループがたくさん必要なのか分かりません。
いずれかのグループを削除すると画像が消えちゃいます。
このコードの意味をどなたか教えてくださいませんか...。
----------追記----------
xml
1<svg width="197px" height="56px" viewBox="0 0 197 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2 <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --> 3 <title>edit_box</title> 4 <desc>Created with Sketch.</desc> 5 <defs></defs> 6 <g id="2.Flow" fill="none" fill-rule="evenodd"><!--内部色なし--> 7 <g id="flow_10" stroke="#2476BC"> 8 <rect id="Rectangle-10" stroke-width="2" x="4" y="5" width="189" height="46"> 9 10 </rect> 11 <rect id="Rectangle-4" fill="#FAFAFA" x="189.5" y="0.5" width="7" height="7"></rect> 12 <rect id="Rectangle-4-Copy" fill="#FAFAFA" x="189.5" y="48.5" width="7" height="7"></rect> 13 <rect id="Rectangle-4-Copy-2" fill="#FAFAFA" x="0.5" y="47.5" width="7" height="7"></rect> 14 <rect id="Rectangle-4-Copy-3" fill="#FAFAFA" x="0.5" y="0.5" width="7" height="7"></rect> 15 <rect id="Rectangle-4-Copy-4" x="90.5" y="24.5" width="7" height="7" rx="3.5"></rect> 16 17 </g> 18 </g> 19 </svg>
このようにして、よりインプルに解釈できるようになりました。
sketchからのexportだと勝手に難しくなってしまうのでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/26 11:27