[英]How do I scale a stubborn SVG embedded with the <object> tag?
我有一些指定width和height SVG文件以及像這樣的viewbox ：
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
但是如何在瀏覽器中以我決定的大小顯示它們？ 我希望它們更小，並嘗試過：
<object width="400" data="image.svg"></object>
但后來我得到了可見的滾動條。
如果我將SVG文件更改為將width和height設置為100% ，它可以工作，但我想確定HTML中的大小，而不管SVG文件中使用的是什么大小。 這可能嗎 ？
您可以將“preserveAspectRatio”和“viewBox”屬性添加到<svg>標記以完成此操作。
在編輯器中打開.svg文件並找到<svg>標記。 在該標記中，添加以下屬性：
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
將{width}和{height}替換為viewBox的一些默認值。 我使用了SVG標簽的“width”和“height”屬性中的值，它似乎有效。
保存SVG，現在應該按預期進行擴展。
我在這里找到了這個信息：
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
當我在2009年回復時，這里給出的答案都沒有給我帶來幫助。因為我現在再次遇到同樣的問題，我注意到使用<img>標簽和寬度以及svg一起工作正常。
<img width="400" src="image.svg">
您可以使用JavaScript訪問嵌入式svg：
var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
由於你的svg已經有了一個viewBox，Firefox應該將viewBox中的576像素寬度縮放到文檔中的400像素寬度。 其他svgs可能會受益於從廣告的寬度和高度派生的新viewBox（這些通常是相同的數字）。 其他瀏覽器可能會受益於不同的svg調整。
<body>
<div>
<object type="image/svg+xml" data="img/logo.svg">
<img src="img/logo.svg" alt="Browser fail" />
</object>
</div>
img / logo.svg ...
<svg
width="100%"
height="100%"
viewBox="0 0 640 80"
xmlns="http://www.w3.org/2000/svg"
version="1.1" />
這個設置對我有用。
我遇到了一個問題，即iPad上的iOS無法在<object>標記中正確調整SVG圖像的大小。
CSS樣式會增加或減少<object>容器的大小，但不會修改其中的圖像（在iPad，iOS 7上）。
SVG圖像是從Adobe Illustrator導出的，解決方案結果是替換寬度和高度：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843"
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">
有：
width="100%" height="100%"
我需要使用<object>標簽，因為<img>標簽目前不支持在SVG中嵌入位圖圖像。
設置缺少的視圖，並在svg標記中填寫set height和height屬性的高度和寬度值
然后，只需將高度和寬度設置為所需的百分比值即可縮放圖片。 祝好運。
您可以使用preserveAspectRatio =“x200Y200 meet來設置固定的寬高比，但這不是必需的
例如
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
只需使用CSS讓瀏覽器調整SVG的大小！ 如下所示： <object style="width:30%">有關詳細信息，請參閱http://www.vlado-do.de/svg_test/ 。 我還在本地嘗試了一個SVG，其寬度和高度以“pt”給出。 它在Firefox中運行良好。
這是一個使用QueryPath的PHP解決方案，基於Jim Keller的回答。
加載QueryPath后，只需將svg腳本傳遞給該函數即可。
function scaleableSVG($svg){
$qp = qp($svg, 'svg');
$width = $qp->attr('width');
$height = $qp->attr('height');
$qp->removeAttr('width')->removeAttr('height');
$qp->attr('preserveAspectRatio', "xMinYMin meet");
$qp->attr('viewBox', "0 0 $width $height");
return $qp->html();
}
讓我們看看。 我不得不刷新我對SVG的記憶，這些年來我還沒有用過它。
從我今天發現的情況來看，似乎如果你指定沒有單位的對象的維度，它們就有一個固定的大小（以像素為單位，我認為）。 顯然，當你調整SVG大小時它沒有辦法調整它們的大小（它只改變視口/畫布大小）。
除非，如指出的那樣，您指定SVG的大小百分比或指定一個viewBox（例如，viewBox =“0 0 600 500”）。
現在，如果你無法改變導出的SVG，我擔心你運氣不好。 你用什么圖書館？
我如何在 <object> 以不同的比例標記？
[英]How can I display an SVG image within an <object> tag at a different scale?
如何將AngularJS與SVG標簽一起使用？ 我想從angular傳遞SVG標簽中的參數
[英]How do I use AngularJS with SVG tag ? I want to pass a parameter in SVG tag from angular
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.