3

複雑な SVG ファイルを取得して、簡単にサイズを変更する方法を見つけようとしています。100x100 の SVG 画像を 5x30 にしたい場合、トリミングせずにサイズを変更したいとします。

SVG ドキュメントのみを使用するか、別の SVG ファイルに埋め込んでこれを行いたいと考えています。私はこれを達成するのに非常に苦労しています。

例えば：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" version="1.0">
  <image x="0" y="0" width="516.3034" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" xlink:type="simple" xlink:actuate="onLoad" height="777.2853" preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
</svg>

これは、埋め込み画像がビューボックス内に収まるように縮小されることを達成したい場合にのみ、画像をトリミングしています。

4

1 に答える 1

4

image 要素にパーセンテージを使用します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet">
</svg>

または、viewBox 座標系を使用します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100" height="100" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet" />
</svg>

パーセンテージはビューポートのサイズに基づいているため、viewBox の縦横比がビューポートと一致しない場合、これら 2 つの方法はわずかに異なる場合があります。画像の縦横比を気にしない場合は、 を使用して画像を指定のサイズに合わせて引き伸ばすことができますpreserveAspectRatio="none"。

于 2013-08-30T09:00:21.113 に答える