`frame`関数

リファレンスの説明と例は英語です。見出しと目次は日本語です。

A flag framed in another shape without stretching it: at its own aspect ratio, at 4:3, square, or in a circle. The flag is nested, whole, inside a new SVG of the frame's shape, and its own viewBox and preserveAspectRatio place it: by default (fit: "auto") the way measured for that flag to keep its colours, so Canada's square shows the whole flag rather than a crop that drops its red bars, and Japan's is cropped to the disc; crop crops at the side chosen for the flag, cover from the centre, hoist from the pole, and whole (or contain) shows all of it. The result is an SVG string like any flag's, with no width or height, so it fills the box it is put in.

With shape: "flag" and no label, the flag is handed back as it was.

インポート

import { frame } from "@johnmorrisdotca/hata";

定義

function frame(svg: string, options?: FrameOptions): string | null

引数

名前	型	説明
`svg`	`string`	A flag's SVG string, from `/flags/<code>` or `flag()`.
`options` (省略可)	`FrameOptions`	`shape` (`"flag"`, `"4:3"`, `"1:1"` or `"round"`; `"flag"` when left out), `fit` (`"auto"`, `"whole"`, `"crop"`, `"cover"`, `"hoist"` or `"contain"`; `"auto"` when left out) and `label`, a name for assistive technology.

戻り値

string | null

The framed SVG string, or null when svg is not an SVG with a viewBox.

例

import { frame } from "@johnmorrisdotca/hata";
import canada from "@johnmorrisdotca/hata/flags/ca";

console.log(frame(canada, { shape: "round" }));                    // the whole flag on a neutral disc: a crop would lose its bars
console.log(frame(canada, { shape: "round", fit: "cover" }));      // a circle, the maple leaf in the middle
console.log(frame(canada, { shape: "4:3", fit: "whole" }));        // all of the 1:2 flag, with bands above and below
console.log(frame(canada, { shape: "1:1", fit: "crop" }));         // the centre crop, because a crop was asked for by name
console.log(frame(canada, { label: "Canada" }));                   // the flag, with role="img" and a title

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="hata-round-12ton6c"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-12ton6c)"><circle cx="256" cy="256" r="256" fill="#e6e6e6"/><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="27.03" y="141.51" width="457.95" height="228.97" preserveAspectRatio="xMidYMid meet"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="hata-round-tqhznh"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-tqhznh)"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid slice"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="640" height="480" preserveAspectRatio="xMidYMid meet"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid slice"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></svg>
<svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" role="img" aria-label="Canada"><title>Canada</title><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg>

出力（このページを作ったときに実行した結果）

ソースを見る GitHub で編集@johnmorrisdotca/hata 1.6.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。

frame関数

定義

引数

戻り値

例

`frame`関数