1

多くのリソースを読みましたが、SVG 画像をブラウザー ウィンドウに収めることができないようです。

最新のモバイル ブラウザーに適合するモバイル アプリケーションで画像を使用する必要がある場合は、html5 ページで SVG 画像を使用する必要があると言われました。

SVG 画像を動作させることができないようです! イラストレーターから保存して、100% 幅の div で html5 ページに埋め込みます。

これを行うための最良の方法は何ですか? 助けてくれてありがとう..

ちなみにJquery mobile/HTML5/CSS3を使っています

<embed src="header.svg" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install" />

デバイスのサイズに合わせたい場合、「viewBox」で特定の幅と高さを指定するにはどうすればよいですか? 私は特定のサイズを持っていません

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg version="1.1" baseProfile="basic" id="Layer_1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="253px" height="60px" viewBox="0 0 253 60" xml:space="preserve">
<g>
    <g>
        <defs>............
4

1 に答える 1

4

視聴者がHTML5パーサー（現在広くサポートされている）を備えたブラウザーを使用している場合は、svgタグに直接xmlを含める必要はありません。オブジェクトや埋め込みタグタグは必要ありません。それはこの時点で古い学校です。そして、あなたは確かにiFrameを必要としません。また、明確にするために、SVGはjQuery自体とは何の関係もありません（実際、jqueryはsvg要素と非常にうまく機能しません）。html5 doctypeを使用していることを確認し、次のように記述してください。

<svg id="mycoolgraphic" viewBox="0 0 253 60" >
<g>
    <g>
        <defs>............
    </g>
</g>
</svg>

すべてのタグが閉じており、xmlとして有効であることを確認してください。タブでインデントしたり、大量のスペースを追加したりしないでください。空のテキストノードのみが作成されます。ただそれをすべて醜くして、一緒に押しつぶしてください。これにより、後でJavaScriptがはるかに簡単に機能するようになります。イラストレーターを使用している場合（これは問題ありません）、メインのsvgタグからいくつかのxml宣言を削除することをお勧めします。要素をレスポンシブにする場合は、明示的な高さと幅を省略します。通常のCSS宣言を介して高さと幅を制御できます。

   #mycoolgraphic { height: 10em;width: 10em;}

レスポンシブsvgを実行する際の主なトリックは、preserveAspectRatio属性を設定することです。これは追加する必要があるものです。（Illustratorからエクスポートされたグラフィックには何も含まれませんpreserveAspectRatio。）この属性は、svgコンテンツ（ビューボックス）がsvg要素（svgビューポート）内でどのようにスケーリングされるかを制御します。ビューボックスは比例して固定されます。イラストレーターでアートを作成したときの長方形でした。自分が何をしているのかを確信している場合を除いて、それを台無しにしないでください。ただし、ビューボックスを含むsvg要素は、他のhtml要素と同じサイズにすることができ、preserveAspectRatio属性は2つの間の関係を記述します。彼女のpreserveAspectRatioに関するMDNの記事は良いです。スペック_この点でも驚くほど読みやすいです。

お役に立てれば！

于 2012-07-10T07:39:29.553 に答える