1. 首頁
  2. 問答
  3. Safari中的SVG大小

Safari中的SVG大小

2012-01-10 78 views
1

我在製作跨瀏覽器的SVG圖像時遇到了麻煩。起初，我在IE 8上遇到了很多麻煩，但是經過很多解決方案後，終於有效。現在Safari是一個大問題，令人驚訝的是，因爲我認爲這會從我讀過的內容中獲得對SVG的強大支持。Safari中的SVG大小

所以這裏的問題：

我生產用於WebHelp的應用程序的HTML頁面，而這是通過XSL來完成。此變換產生與包括SVG文件對象元素的HTML文件：

<object 
    type="image/svg+xml" class="image" 
    id="Push12Principschema__image_538dabf9-da61-46a1-99c4-863a880aed46" 
    data="/handbok/images/Push12_5039/Ettrors.svg"> </object>

現在，SVG文件具有與以像素爲單位的固定值的視框，然後寬度和高度設定爲100％，以使得能夠通過縮放包裝對象元素來縮放圖像。

因此，我使用jQuery設置寬度（大多數瀏覽器不需要高度）爲50％。然後，如果用戶點擊圖片，它會將對象寬度縮放到100％。

這適用於除Safari之外的所有瀏覽器。

首先，Safari甚至沒有以全尺寸顯示svg圖像（如果我設置的話甚至不會顯示50％），而是縮小的尺寸，可能是視框值的大小。

所以即使我嘗試（用於測試）將對象標籤的寬度設置爲100％，這並不重要。如果我這樣做，所有其他瀏覽器佔用頁面上的所有可用空間。

當然，出於同樣的原因，擴大規模也不起作用（如果我最初將其設置爲50％）。

我也試過專門設置高度爲100％。這也沒有幫助。

似乎在Safari中工作的唯一方法是將其設置爲寬度和高度的固定像素值。這顯示了體面大小的圖像。

但這不是我可以輕易做到的事情，因爲我不知道圖像的確切大小，甚至比例。

那麼爲什麼它可以在所有瀏覽器中運行，但不是Safari，我該如何爲Safari提供支持？

編輯：對不起，發佈錯誤的代碼使用的對象元素。我實際上創建了幾個，併爲不同的瀏覽器隱藏了不相關的。我現在改變的那個是所有瀏覽器都顯示的，但IE8。

編輯2：

在作出這是一個非常漫長的崗位的風險，我想這可能是張貼SVG代碼是個好主意。我擁有的是大量的SVG圖像，從EPS圖像保存在Illustrator中。這些獲得固定的像素值的寬度和高度，這在大多數瀏覽器中不適用於縮放，我已經瞭解到。所以我有搜索 - 使用XPath將寬度和高度屬性替換爲100％值。另外，因爲我注意到大多數圖像中的畫板有問題，我嘗試在Illustrator中使用「Save for web and devices」命令重新保存svg圖像，然後再次選擇SVG作爲輸出格式。至少當你在那裏觀看時，這固定了畫板。

所以，這裏有一個，我已經做了兩個「另存爲Web和設備」，以嘗試解決畫板，並且也改變了寬度和高度爲100％：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ 
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> 
]> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px" y="0px" width="100%" height="100%" viewBox="-0.5 -0.21 613 485" 
    overflow="visible" enable-background="new -0.5 -0.21 613 485" xml:space="preserve"> 
<defs> 
</defs> 
<path stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M90.626,274.561 
    c0-115.164,93.354-208.518,208.515-208.518c115.16,0,208.515,93.354,208.515,208.518c0,115.161-93.355,208.507-208.515,208.507 
    C183.979,483.068,90.626,389.722,90.626,274.561L90.626,274.561z"/> 
<path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M104.269,274.561 
    c0-107.627,87.248-194.875,194.872-194.875c107.625,0,194.875,87.248,194.875,194.875c0,107.626-87.25,194.867-194.875,194.867 
    C191.517,469.428,104.269,382.187,104.269,274.561L104.269,274.561z"/> 
<path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M136.748,274.561 
    c0-89.693,72.703-162.396,162.391-162.396c89.695,0,162.396,72.706,162.396,162.396c0,89.688-72.704,162.389-162.396,162.389 
    C209.451,436.95,136.748,364.246,136.748,274.561L136.748,274.561z"/> 
<path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M171.824,274.561 
    c0-70.319,57-127.319,127.314-127.319c70.314,0,127.319,57.002,127.319,127.319c0,70.316-57.005,127.312-127.319,127.312 
    C228.824,401.873,171.824,344.877,171.824,274.561L171.824,274.561z"/> 
<path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M274.895,64.161H17.568 M267.857,484.169 
    H17.568 M45.729,86.842v374.646"/> 
<polygon points="45.729,88.154 37.848,88.154 45.729,68.455 53.606,88.154 "/> 
<polygon points="45.729,460.183 53.606,460.183 45.729,479.877 37.848,460.183 "/> 
<path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M612,182.266H323.888 M612,366.844H335.624 
    M593.232,207.293V348.08"/> 
<polygon points="593.232,208.605 585.351,208.605 593.232,188.906 601.114,208.605 "/> 
<polygon points="593.232,346.763 601.114,346.763 593.232,366.467 585.351,346.763 "/> 
<text transform="matrix(0 -1 1 0 556.5376 309.7231)" font-family="'FoundryFormSans-Book'" font-size="36.535">d</text> 
<text transform="matrix(0 -1 1 0 565.4243 291.2427)" font-family="'FoundryFormSans-Book'" font-size="36.535">u</text> 
<text transform="matrix(0 -1 1 0 30.4517 278.7349)" font-family="'FoundryFormSans-Book'" font-size="36.535">D</text> 
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M205.919,274.561 
    c0-51.488,41.734-93.222,93.219-93.222c51.488,0,93.222,41.734,93.222,93.222c0,51.48-41.733,93.224-93.222,93.224 
    C247.656,367.785,205.919,326.042,205.919,274.561L205.919,274.561z"/> 
<path fill="#B1B3B4" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M227.433,274.561 
    c0-39.606,32.104-71.71,71.708-71.71c39.601,0,71.713,32.104,71.713,71.71c0,39.604-32.112,71.705-71.713,71.705 
    C259.538,346.264,227.433,314.162,227.433,274.561L227.433,274.561z"/> 
<path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M390.374,250.593V35.22 M368.476,250.593 
    V35.22 M448.254,46.701h-36.514"/> 
<polygon points="413.055,46.701 413.055,54.579 393.35,46.701 413.055,38.821 "/> 
<line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="327.018" y1="46.701" x2="342.413" y2="46.701"/> 
<polygon points="341.095,46.701 341.095,38.821 360.802,46.701 341.095,54.579 "/> 
<text transform="matrix(1 0 0 1 415.5356 30.4517)" font-family="'FoundryFormSans-Book'" font-size="36.535">s</text> 
</svg>

而且這裏有一個（不同的圖像）的寬度和高度值更改爲100％，但沒有做「另存爲Web和設備」命令：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<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="100%" height="100%" viewBox="0 0 121.057 96.619" enable-background="new 0 0 121.057 96.619" 
    xml:space="preserve"> 
<g> 
    <path stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M17.357,56.287c0-22.063,17.886-39.95,39.951-39.95 
     s39.95,17.886,39.95,39.95c0,22.064-17.885,39.951-39.95,39.951S17.357,78.351,17.357,56.287L17.357,56.287z"/> 
    <path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M19.971,56.287 
     c0-20.62,16.716-37.336,37.337-37.336c20.62,0,37.336,16.716,37.336,37.336c0,20.621-16.717,37.338-37.336,37.338 
     C36.687,93.625,19.971,76.908,19.971,56.287L19.971,56.287z"/> 
    <path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M26.194,56.287 
     c0-17.183,13.93-31.113,31.114-31.113c17.184,0,31.114,13.93,31.114,31.113c0,17.186-13.93,31.115-31.114,31.115 
     C40.124,87.402,26.194,73.472,26.194,56.287L26.194,56.287z"/> 
    <path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M32.417,56.287 
     c0-13.747,11.144-24.891,24.892-24.891c13.747,0,24.891,11.144,24.891,24.891c0,13.748-11.145,24.893-24.891,24.893 
     C43.561,81.179,32.417,70.035,32.417,56.287L32.417,56.287z"/> 
    <path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M52.663,15.976H3.359 M51.313,96.449 
     H3.359 M8.754,20.322v71.781"/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="8.754,20.573 7.245,20.573 8.754,16.799 10.264,20.573 8.754,20.573 "/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="8.754,91.851 10.264,91.851 8.754,95.626 7.245,91.851 8.754,91.851 "/> 

     <line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="117.459" y1="41.51" x2="117.459" y2="51.402"/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="117.459,41.762 115.949,41.762 117.459,37.988 118.969,41.762 
     117.459,41.762 "/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="117.459,51.15 118.969,51.15 117.459,54.923 115.949,51.15 
     117.459,51.15 "/> 

     <line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="116.053" y1="67.226" x2="116.053" y2="71.123"/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="116.053,67.478 114.543,67.478 116.053,63.705 117.563,67.478 
     116.053,67.478 "/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="116.053,70.871 117.563,70.871 116.053,74.646 114.543,70.871 
     116.053,70.871 "/> 
    <text transform="matrix(0 -1 1 0 110.4395 52.4497)" font-family="'FoundryFormSans-Book'" font-size="7">d</text> 
    <text transform="matrix(0 -1 1 0 112.1309 48.9048)" font-family="'FoundryFormSans-Book'" font-size="7">u</text> 
    <text transform="matrix(0 -1 1 0 109.0215 75.4048)" font-family="'FoundryFormSans-Book'" font-size="7">d</text> 
    <text transform="matrix(0 -1 1 0 110.7168 71.8579)" font-family="'FoundryFormSans-Book'" font-size="7">u</text> 
    <text transform="matrix(0 -1 1 0 5.8345 57.0923)" font-family="'FoundryFormSans-Book'" font-size="7">D</text> 
    <path fill="#D9DADB" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M38.433,56.287 
     c0-10.423,8.45-18.874,18.875-18.874c10.424,0,18.875,8.451,18.875,18.874c0,10.426-8.451,18.875-18.875,18.875 
     C46.883,75.162,38.433,66.712,38.433,56.287L38.433,56.287z"/> 
    <path fill="#FFFFFF" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M47.831,46.629 
     c0-5.062,4.104-9.165,9.165-9.165c5.063,0,9.165,4.104,9.165,9.165s-4.102,9.165-9.165,9.165 
     C51.934,55.794,47.831,51.691,47.831,46.629L47.831,46.629z"/> 
    <path fill="#B1B3B4" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M49.946,46.629 
     c0-3.894,3.156-7.05,7.05-7.05c3.895,0,7.049,3.157,7.049,7.05s-3.155,7.05-7.049,7.05C53.102,53.679,49.946,50.523,49.946,46.629 
     L49.946,46.629z"/> 
    <path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M119.648,63.031H59.502 M119.648,74.72 
     H61.301 M121.057,37.314H62.559 M121.057,54.998h-56.85 M66.221,44.898V5.377 M63.672,43.399V5.377 M59.327,10.172h-2.848"/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="59.075,10.172 59.075,8.663 62.85,10.172 59.075,11.682 59.075,10.172  
     "/> 

     <line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="70.715" y1="10.172" x2="79.408" y2="10.172"/> 
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="70.967,10.172 70.967,11.682 67.193,10.172 70.967,8.663 70.967,10.172 
     "/> 
    <text transform="matrix(1 0 0 1 72.9902 5.8345)" font-family="'FoundryFormSans-Book'" font-size="7">s</text> 
    <path fill="#87888A" d="M38.611,56.263h37.385c0,0-0.068,2.58-0.697,5.1c-0.648,2.586-2.127,5.16-3.703,7.006 
     c-2.023,2.375-4.693,4.168-5.793,4.619c-1.1,0.453-3.105,1.361-4.076,1.619c0,0-2.77,0.49-3.934,0.49s-3.844-0.148-5.202-0.537 
     c-1.358-0.389-4.266-1.615-5.452-2.477c-1.423-1.035-3.539-2.889-4.314-3.924s-2.305-3.016-2.887-4.633s-1.226-4.268-1.291-4.721 
     C38.583,58.353,38.611,56.263,38.611,56.263L38.611,56.263z"/> 
    <path fill="#FFFFFF" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M51.224,68.933 
     c0-3.238,2.626-5.865,5.866-5.865s5.865,2.627,5.865,5.865c0,3.24-2.625,5.865-5.865,5.865S51.224,72.173,51.224,68.933 
     L51.224,68.933z"/> 
    <path fill="#B1B3B4" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M52.758,68.933 
     c0-2.393,1.939-4.332,4.332-4.332s4.332,1.939,4.332,4.332s-1.94,4.332-4.332,4.332S52.758,71.326,52.758,68.933L52.758,68.933z"/> 
</g> 
</svg>

現在，我不知道很多關於SVG可言，但我認爲他們可能有問題。因爲如果我使用FireBug或Safari中的Web檢查器查看HTML頁面，並將光標停留在代碼中的svg元素上，則指示元素區域的陰影矩形與實際圖像不一致。相反，它被顯示爲圖像外的陰影矩形，有時幾乎佔據了整個頁面...

那麼這個問題可能與SVG代碼有關？雖然什麼奇怪的是，這一切都不是造成在其他瀏覽器，甚至沒有瀏覽器，這是我所期望的行爲非常類似於Safari瀏覽器的任何問題......

來源

2012-01-10 Anders

回答

0

嘗試改變屬性classid =>type和src =>data，否則我甚至不能查看我的SVG腳本。這個CSS爲我做的伎倆：

html, body { 
    height: 100%; 
}

哦，還有一兩件事，當object顯示我的瀏覽器緩存SVG，所以您可能還需要清除瀏覽器緩存。由於某些原因，embed未被緩存。

完整的示例：

rect.svg

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="100%" 
    height="100%" 
    viewBox="0 0 400 200"> 
    <rect x="110" y="50" width="200" height="150" fill="red"/> 
</svg>

demo.html

<!doctype html> 
<html> 
<head> 
<style> 
html, body { 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<embed width="100%" height="100%" type="image/svg+xml" src="rect.svg"/> 
</body> 
</html>

來源

2012-01-10 17:20:01 bennedich

+0

謝謝，但我實際上已經貼錯了對象元素的代碼。請參閱我的編輯。所以我使用了你已經建議的相同屬性。此外，我試圖設置身體和HTML的高度，但它沒有改變任何東西。實際上，你對瀏覽器緩存非常正確。由於某種原因，在Safari上擺脫緩存尤其困難，所以很難知道有時會看到更新。我清空它，但它並不總是需要（通過添加像JavaScript警報測試代碼看到）。我已經嘗試過這個，知道它不工作，但... – Anders 2012-01-10 19:49:06

+0

增加了一個在safari中工作的例子，它可用嗎？觀察我使用了'embed'，它沒有比'object'緩存（更簡潔）。 – bennedich 2012-01-10 20:57:20

+0

嗯，我試過你的例子，它顯示出來很好，但我無法通過在嵌入或對象上設置寬度和高度值（嘗試兩者）來縮放該值。你是？我預料這個矩形會填滿整個屏幕，因爲你已經在css中設置了100％，但它沒有... – Anders 2012-01-10 21:40:08

相關問題

 相關問題