Q&A
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件
0
ベストアンサー
translate属性は、要素の移動を表現していると思います。マイナスはプラスとは逆に移動したということで、右にいって左にいくとプラスとマイナスが両方でてくると思います。
グループがたくさんなのはそういう操作をしたからだと思います。元に戻すなどをサポートするには過程を保持する必要があり、それが出力されているのでは？。また、元に戻せない・結果の出力だけ考えても、右に10px行って左に7px行った時に両方をあわせて右に3pxを出すのはそれなりに難しいです。間に違う作業が入ることも考えると。
画像が消える、は一つには開始タグと終了タグをペアで消しているかの問題と、もうひとつ描画領域の外に移動している可能性、の二つが考えられます。
投稿2018/07/26 10:45
総合スコア12705
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/26 11:27