May 2017
Intermediate to advanced
432 pages
5h 26m
Japanese
Content preview from SVGエッセンシャルズ 第2版
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
6章座標系の変換
ここまでは、すべてのグラフィックスはそのまま表示されていました——それらの属性で定義されたとおりに、指定された場所に描画されていました。しかし、ときには、グラフィックスを回転させたり、拡大縮小したり、別の場所に動かしたりしたい場合もあるでしょう。これらの課題を実現するには、SVG要素にtransform属性を追加します。この章では、これらの変換（transformation）について詳しく説明します。
6.1 translate変換（移動）
「5章 文書構造」では、<use>要素とともにx属性やy属性を使って、グラフィックオブジェクトのグループを特定の場所に配置できることを学びました。例6-1のSVGを見てください。このコードは、正方形を定義してグリッドの左上隅に描画し、さらに (50,50) の座標を左上隅として再び正方形を描画します。図6-1の破線はこのSVGの一部ではなく、私たちが関心を抱いているキャンバスの部分を示しています。
例6-1 useによるグラフィックの移動
<svg width="200px" height="200px" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<g id="square">
<rect x="0" y="0" width="20" height="20"
style="fill: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="50" y="50"/>
</svg>
実はこのxとyは、より一般的で、より多機能なtransform属性の1つの形式を省略したものです。具体的に言うと、 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.