我无法让SVG图片跨浏览器工作。起初我在使用IE 8时遇到了很多麻烦，但经过大量的解决方法后，最终会有效。现在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中的“保存为Web和设备保存”命令重新保存svg图像，再次选择SVG作为输出格式。这至少在您在那里查看时固定了画板。
所以，这里我已经完成了“为网络和设备保存”以尝试修复画板，并且还将宽度和高度更改为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，但我认为它们可能有问题。因为如果我在Safari中使用FireBug或Web检查器查看HTML页面，并将光标放在代码中的svg元素上，则指示元素区域的阴影矩形与实际图像不一致。相反，它在图像外部显示为阴影矩形，有时几乎占据整个页面......
问题可能与SVG代码有关吗？但奇怪的是，这些都不会导致其他浏览器出现任何问题，甚至Chrome也不会出现问题，我希望这些问题与Safari非常相似......
答案 0 :(得分：0)
尝试更改属性classid =＆gt; type和src =＆gt; 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>