私は自分のウェブサイトのヒーローとして使用したいベクター画像を作成しました。すべての解像度でビューポートの幅と高さを記入する必要があります。インラインSVGが常に画面に表示されるようにするにはどうすればよいですか？
さらに、私はSVGの要素をCSSまたはJavaScriptでアニメーション化できる必要があるため、CSSバックグラウンドまたはimgとして挿入することはできません（少なくとも私が知る限り）。
あなたはこれを解決する方法を知っていますか？ この画像は、私が達成したいことを示しています：
何か助けていただければ幸いです！
のonloadイベントのコメントを外し、それが、ロバートLongsonさんのコメントのおかげで動作するようになった： はpreserveAspectRatio="xMidYMid slice"を適用します幅100％&のSVGが動作しました。あなたはここでそれを見ることができます
属性preserveAspectRatio="slice"をSVGに追加します。詳細は、https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatioを参照してください。
画像がアスペクト比に変化を示さないので、必要なものと一致していないようです。代わりに、どちらの方向にもオーバーフローしてカットされます。 –
@RobertLongsonああ、私は絵をよく見ていませんでした。 "none"の代わりに "slice"は意図したとおりに行うべきです。 –
これはスライスを持たないので無効です。有効なアライメント値の前にスライスを置く必要があります。 –
画面を満たしている好ましいsvg画像がトリミングされて表示されます。 SVGを使って作業しているときに、画像全体を、切り抜きなしで画面をうまく中心にしたいと思うかもしれません。以下のサンプルコードは、SVGファイルをロードし、SVGを中心に画面を埋めます。すべての要素はCSSやJavaScriptの変更が可能です。 これはウィンドウのサイズ変更にも反応します。 HTMLファイルへ
コピー以下、独自のSVGファイルのURLを追加し、
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load SVG file - full screen</title>
</head>
<body style='padding:0px;font-family:arial'>
<div id=svgDiv style='width:100%;height:100%;overflow:hidden;position:absolute;top:0px;left:0px;'></div>
<script>
function loadSVG()
{
\t var SVGFile="...your SVG file..."
\t var loadXML = new XMLHttpRequest;
\t loadXML.onload = callback;
\t loadXML.open("GET", SVGFile, true);
\t loadXML.send();
\t function callback()
\t {
\t \t //---responseText---
\t \t svgDiv.innerHTML=loadXML.responseText
sizeFull()
\t }
}
//--onload, onresize----
function sizeFull()
{
\t var mySVG=document.getElementsByTagName("svg")[0]
\t var svgW=window.innerWidth
\t var svgH=window.innerHeight
var bb=mySVG.getBBox()
\t var bbx=bb.x
\t var bby=bb.y
\t var bbw=bb.width
\t var bbh=bb.height
mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh)
mySVG.setAttribute("width",svgW)
mySVG.setAttribute("height",svgH)
}
window.onresize=sizeFull
//document.addEventListener("onload",loadSVG(),false)
</script>
</body>
</html>
preserveAspectRatio = "xMidYMidスライスは、" あなたは私が考えて欲しいものです。 –
ご協力ありがとうございます！それは働くようになった。 – Philex