Question

与其他浏览器相比，为什么我的SVG在IE9浏览器中的渲染非常小？检查一下： http://jsfiddle.net/manisha_dayal/BhL5h/

CODE：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 465 500">
 <defs>
  <linearGradient y2="-4.464" x2="9.31253" y1="-4.464" x1="9.06029" id="linearGradient5389-288" xlink:href="#linearGradient5281-60-75"/>
  <linearGradient id="linearGradient5281-60-75">
   <stop offset="0" id="stop5283-4-81" stop-color="#00bc00"/>
  </linearGradient>
  <linearGradient y2="-1.96423" x2="5.56889" y1="-1.96423" x1="5.52626" id="linearGradient5358-257" xlink:href="#linearGradient5281-6-7-44"/>
  <linearGradient id="linearGradient5281-6-7-44">
   <stop offset="0" id="stop5283-8-7-44" stop-color="#00bc00"/>
  </linearGradient>
 </defs>

   <path fill="#803300" stroke="#4f0000" stroke-width="1.63124" d="m175.179688,386.799622c0,0 2.236053,0.28125 2.236359,16.800903c0,0.249329 -0.117767,0.124695 -0.117767,0.124695c0,0 4.190033,1.643066 5.060883,-0.748169c0.521469,-1.430542 -1.075348,1.471313 0.117767,0c0,0 -1.294525,-14.932739 3.295624,-27.626404c4.590118,-12.693665 -2.82486,-1.74231 -2.82486,-1.74231l-3.88385,13.191284l-2.589325,-3.608948l-1.29483,3.608948z" id="path5340" stroke-miterlimit="4"/>
    <path fill="url(#linearGradient5389-288)" stroke="#006500" stroke-width="1.63124" id="path3067" d="m154.31485,366.880066c0,0 27.001648,-0.080078 22.36261,18.915894c-0.197449,0.808472 -22.480286,9.084473 -22.36261,-18.915894z" stroke-miterlimit="4"/>
    <path fill="#008000" stroke="#000000" stroke-width="0" id="path5410" d="m158.293701,370.173401c0,0 1.708588,4.247437 16.853973,14.874146c4.774017,3.34967 -16.853973,-14.874146 -16.853973,-14.874146z" stroke-miterlimit="4"/>
    <path fill="url(#linearGradient5358-257)" stroke="#006500" stroke-width="1.63124" id="path3067-8" d="m214.873505,343.743317c0,0 -3.808258,43.607941 -30.013,31.236115c-0.7211,-0.340454 -14.005951,-32.605011 30.013,-31.236115z" stroke-miterlimit="4"/>
    <path fill="#008000" stroke="#000000" stroke-width="0" id="path5410-9" d="m202.954803,354.108612c0,0 -9.3685,8.154877 -17.436462,19.707367c-2.391663,3.424561 17.436462,-19.707367 17.436462,-19.707367z" stroke-miterlimit="4"/>
   <path fill="#005900" stroke="#084708" stroke-width="0" d="m167.58728,404.461884c0,0 -3.645798,-4.193726 -12.141418,-4.239349c-3.093018,-1.404694 8.388412,3.332947 7.573563,5.931885c2.193863,2.063873 20.251053,1.585205 22.153366,0.386536c13.504608,1.593384 5.851257,-1.770721 12.247177,-0.591553c4.639633,-13.084442 8.780899,-4.412567 9.502029,-6.244659c-0.358047,0.504974 -6.177658,-6.651428 -13.17511,3.11554c-1.58197,-1.817108 -0.340118,-6.438782 2.154877,-9.259857c-6.068848,2.962555 -3.955688,3.255798 -9.720398,9.497223c-0.563629,-1.858063 -3.688263,-0.623657 0.117111,-10.350433c-7.222672,1.65155 -5.35704,14.027435 -6.14537,11.844543c-0.788361,-2.181915 -6.210281,-9.869324 -13.734482,-10.934387c0.586411,1.125366 10.06958,5.845795 7.912262,11.765533c-4.269089,-2.511169 -6.177917,-9.453339 -14.240829,-10.067078c4.514236,2.352417 6.908157,4.650513 7.497223,9.146057l0,0l0,0l0,0l0,0z" id="path10811" stroke-miterlimit="4"/>
  <rect fill="none" id="canvas_background" height="409.50003" width="343.59283" y="-1" x="-1"/>
</svg>

Answer 1

由于您未指定width和height。这使显示软件可以自己选择尺寸。

要指定尺寸，只需将width和height - 属性添加到svg - 元素。

您指定的viewBox - 属性表示svg内部坐标系的大小和位置。您在位置属性（x，...）中使用的值是指由这四个值给出的坐标系。前两个整数表示坐标系的0点，而后两个值表示以内坐标系为单位的图像的宽度和高度。如果您表示viewBox="0 0 465 500"，则图像中可见的点从（0,0）到（456,500）最后。

width和height - 属性表示图像的外部大小。这些应该以单位（例如4cm）给出。这些属性告诉显示软件应该绘制多大的图像。

如果选择viewBox="0 0 100 100"和width="4cm" height="3cm"，内坐标中的点（100,100）指的是外坐标中的点（4cm，4cm）。

与其他浏览器相比，为什么我的SVG在IE9浏览器中的渲染非常小？

1 个答案: