SVGのパターン変形：輪郭を保って塗りを回転する
patternTransformで固定したエンブレム内の反復する塗りを回転、移動。オブジェクト全体の回転と比較し、元データ、形状、ブラウザーのピクセルを検証します。
固定した図形の内側でSVGパターンを回転するには、pattern要素にpatternTransform="rotate(...)"を指定します。図形自体の変形は変更しません。繰り返すアートワークの配置をずらしたい場合は、同じパターンに平行移動を指定してください。
これらの編集が動かすのは塗りの座標系です。図形を含むグループを回転すると、表示される形状も動きます。独自の中空エンブレムで違いを確認できます。塗りを回しても輪郭は直立したままですが、別の全体回転の対照例では、エンブレムと開口部が傾きます。
動かす要素を選ぶ
現在のpatternTransformリファレンスは、パターンタイルに適用する変形リストを説明しています。SVG2のパターン定義は、タイルの座標系と塗りの変形を説明しています。
この例のモチーフは、24単位のタイル内で繰り返す、小さな非対称の折れ曲がった記号です。塗りを受け取る図形は別のパスで、長方形の開口部がある非対称のバッジです。この役割を分けると、編集の判断が明確になります。
| 目的の変更 | 属性を置く場所 | 確認すること |
|---|---|---|
| 繰り返すモチーフの面を回す | patternのpatternTransform | モチーフの方向とタイル格子 |
| バッジ内のモチーフの配置をずらす | patternのpatternTransform | 輪郭と開口部での位相 |
| バッジ全体を回す | グループのtransform | 表示される輪郭、開口部、範囲 |
ここではSVG属性を直接使います。MDNのCSS transform実装に関する注意書きは、pattern-transformというCSSプロパティが利用先で動作すると約束するものではありません。
塗りの回転の完全なひな形を開く
このSVGをpattern-emblem.svgとして保存し、ブラウザーで開きます。外部画像やライブラリーがない自己完結した例です。パターンは元座標の点(100,80)を中心に30度回転し、塗りを受けるグループには変形がありません。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs>
<pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
<rect width="24" height="24" fill="#f4f0e4"/>
<path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
</pattern>
</defs>
<g>
<path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
</g>
</svg>evenoddの塗り規則で、内側の長方形が開いたままになります。交差に基づく規則はfill-ruleリファレンスを参照してください。開口部はエンブレムのパスに属するため、繰り返す塗りを回しても、開口部は回りません。
この元データでは、patternUnitsとpatternContentUnitsを両方明示しています。patternUnitsリファレンスは、タイル座標系を定義しています。パターン単位ガイドでは、タイル寸法とモチーフ座標を詳しく説明しています。ここでは変形を切り分けるため固定しており、継ぎ目のない反復を設計するレシピではありません。
回転、平行移動、形状の対照例を比較する
ひな形を三つコピーし、指定した属性だけを変えます。
- 元の塗りには、パターンから
patternTransformを削除します。 - 塗りをずらすには、
patternTransform="translate(7 5)"に置き換えます。 - オブジェクト全体の対照例には、パターンの変形を削除し、受け手の
g要素にtransform="rotate(20 100 80)"を追加します。
平行移動したコピーはモチーフの向きを保ちますが、バッジ内の位置が変わります。境界の記号が塗り領域へ入ったり、外へ出たりする場合があります。回転したコピーはモチーフと反復格子を一緒に回します。モチーフ一つずつを、自身の中心の周りに回すだけではありません。
オブジェクトの対照例について、transform属性リファレンスは、選んだ点の周りでの回転を説明しています。この変形は、グループ形状の表示方法を変えます。通常のパターン塗りも一緒に動き、ユーザー空間のパターン単位にしても、この例の塗りが全体座標で静止するわけではありません。
結果を診断するときは、一つの変形から始めます。後で回転、平行移動、拡大縮小を組み合わせる場合は、SVGの変形順序ガイドで順序を確認してください。変形の組み合わせは、この条件を固定した比較では避けている別の座標の問題を生みます。
形状とピクセルを別々に検証する
元の四つのバリエーションを、Chromeで200×160と400×320 CSSピクセルに描画しました。ブラウザーのデバイスピクセル比率は2です。また各元データをデコードし、指定したテストサイズと一致する内部バッファー寸法のキャンバスに描き、スクリーンショットとは独立してピクセルを読み取れるようにしました。
すべてのファイルに、同じエンブレムのd文字列と同じモチーフのパスがあります。パス要素は二つ、画像要素はありません。変形が異なるため、ファイル全体のハッシュは異なります。エンブレムのローカルな形状範囲は、すべて(30,25,140,110)です。
このローカル範囲だけでは、オブジェクト全体の変化を見落とします。この多角形エンブレムでは、外側の五つの頂点を実際のブラウザー行列で変換し、表示範囲も計測しました。表は、大きいビューポートの値を元の単位に正規化しています。
| バリエーション | パターンの変形 | グループの変形 | 表示される外側の範囲x,y,幅,高さ |
|---|---|---|---|
| 元の状態 | なし | なし | 30,25,140,110 |
| 塗りを回転 | rotate(30 100 80) | なし | 30,25,140,110 |
| 塗りを移動 | translate(7 5) | なし | 30,25,140,110 |
| オブジェクトを回転 | なし | rotate(20 100 80) | 約15.41,4.38,155.50,140.99 |
正規化した範囲は、テストした両サイズで一致しました。オブジェクトの対照例は同じd文字列を保ちますが、表示される形状は変わります。したがって、元データの一致はパスの構成が保持された有用な根拠にはなりますが、見える輪郭が同じ場所にある十分な証拠ではありません。
塗りだけを変えた版では、各サイズのキャンバスのピクセルバッファー全体が元のものと異なりました。元座標の点(45,45)では、元のサンプルはタイル背景(244,240,228)、回転した塗りはテラコッタ色のモチーフ(193,90,56)で、どちらもアルファ255でした。平行移動ではその特定のサンプルは変わりませんでしたが、バッファー全体は異なります。一つのサンプル点だけでは、塗りの移動を見落とす場合があります。
元座標(85,80)では、八つすべてのケースで開口部のアルファがゼロでした。また、各サイズの三つの直立した版では、完全不透明ピクセルの範囲も変わりませんでした。ただし、しきい値によるピクセル範囲と、正確な輪郭頂点の範囲は異なる計測です。これらはこの自作の元データとブラウザーに限った観察であり、レンダラーの互換性証明ではありません。
納品前に保存した利用先の結果を確認する
元のエンブレムを形状の基準として残し、塗りの効果は別のコピーに保管します。繰り返すペイントサーバーは、見えるすべてのモチーフを、後工程のカッターやエディターで選択できる独立した図形にするものではありません。利用先が展開済みの形状を必要とする場合は、展開を別に準備して確認してください。SVG編集ガイドでは、より広い元データの変更を扱っています。
輪郭が予想外に回る場合は、パターンを調整する前に、そのグループと祖先要素の変形を調べます。複数のインラインコピーで意図せず同じ塗り効果が共有される場合は、パターンIDと対応するfill参照に固有名を付けてください。この比較用ファイルではIDを分離しています。独立した別々のSVGファイルは、そのドキュメント単位のリソース名前空間を共有しません。
独自のモチーフやエンブレムがPNGやJPGでしか存在せず、編集可能な輪郭が必要なら、PerfectVectorでSVGを準備し、輪郭と開口部を確認して、きれいなマスターを保管します。その後、SVGコードで反復を作り、塗りの変形を選んでください。ベクター化はアートワークを準備するもので、反復を設計したり、位相を選んだり、利用先のパターン処理を保証したりしません。きれいなパスがすでにあるなら、そのままパターン編集に進めます。ベクター化ガイドで、ラスター変換が役立つ場面を説明しています。
よくある質問
patternTransformはエンブレムのパスデータを変えますか？ この例ではパターンの塗りを変形します。エンブレムのd文字列は変わりません。表示形状はdを変えずに動く場合があるため、受け手のグループと祖先の変形も確認してください。
パターンを回転せずにずらせますか？ はい。translate(7 5)の版は、モチーフの向きを保って塗りの位置をずらします。効果をテストする間は、タイル寸法と受け手の形状を固定してください。
グループ全体を回すとパターンも回るのはなぜですか？ グループの変形は、表示される受け手の形状と塗りを変えます。pattern要素だけに変形を置く操作とは別です。
繰り返すモチーフは別々の編集可能なパスですか？ この元データには、ペイントサーバー内のモチーフパスが一つと、受け手のエンブレムパスが一つあります。見える反復は、別々に作成したパス要素ではありません。利用先がその形式を必要とするなら、別に展開して確認してください。
出典
- MDN — patternTransform — パターンの変形リストと属性実装の注意書き。
- W3C — SVG2のパターン — タイル座標系と塗りの変形。
- MDN — fill-rule — 受け手のパス内の偶奇規則による開口部。
- MDN — transform — 表示されるグループ形状に適用する回転。
- MDN — patternUnits — この比較で固定した、明示的なタイル座標系。
