私には 100 近くの SVG ファイルのコレクションがあり、すべて美しく手作業でコーディングされており、それぞれの viewBox、幅、高さが慎重に指定されています。これらの SVG ファイルは、幅、高さ、アスペクト比が異なります。
厄介な問題があります。私はそれらの相対的なサイズを気にしており、保存したいと考えています。
HTML ページでは、「自然な」サイズ、つまり幅と高さで指定されたサイズで表示したいと考えています。非常に簡単です: <img src="….svg">。おそらく、CSS で {object-fit: none;} を指定する必要がありますが、それは機能しないようです。
また、一定の倍率 (たとえば 6 倍) で表示したいと考えています。明らかに、CSS はピクセル幅に固執することができますが、このタイプのアップスケーリングは一貫した係数によって行われるわけではありません。
HTML または CSS (できればスクリプトなし) で、SVG を基本サイズの 600% (各 SVG ファイルの最初の行の幅と高さの 6 倍) で表示するように指定するにはどうすればよいか教えてください。 。
[編集]おそらく、目的に関するいくつかの言葉は、人々にインスピレーションを与えたり、単に楽しませたりするでしょう。金融市場のチャートや数値グラフィックでは、混乱しています。一貫した表現はありません。私は何十年もの間、USD EUR GBP JPY CHF CAD AUD NZD SEK NOK など、独自にデザインしたいくつかの標準記号を使用してきました。時間の経過とともに、このリストには、私が検討したすべての通貨およびソブリン債の発行体、EMBI 構成国、EU 加盟国および加盟候補国、GDP の大きいその他のいくつかの国、および開発銀行の債券発行体が含まれるようになりました。現在、このコレクションは SVG として書き直されており、途中で改良と改良が加えられています。マーカーが異なればアスペクト比も異なるため、幅も異なります。 HTML ページを (小さい) 自然なサイズで表示するだけでなく、詳細が正しいことを確認するために一定の倍率でも表示したいと考えています。
はい、準備が整い次第、Boost ライセンスの下でオープンソースになる予定です。
P粉3233748782024-01-11 13:25:55
6 倍ズームの場合は、次のようにタグを設定します
リーリーまたは、CSS ファイルにtransform属性を追加します。 6,6 は、X と Y がそれぞれ 6 倍にスケーリングされることを意味します。