html 为什么内嵌PNG的SVG不能在Safari中显示?

gc0ot86w  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(59)

这似乎是一个简单的问题,但我找不到答案。SVG像XML代码一样嵌入在HTML文档中,而不是像带标签的图像。它在除Safari之外的所有浏览器中显示。下面是SVG:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 1600 1050"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#86776F}
    .fil1 {fill:#FEFEFE;fill-rule:nonzero}
   ]]>
  </style>
 </defs>
 <g id="turbocharger">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g style="clip-path:url(#id0)">
   <image id="turbo_bg" x="64.88" y="138.17" width="1436.25" height="791.66" xlink:href="/img/turbocharger/turbo_charger.png"/>
  </g>
  <g style="clip-path:url(#id1)">
   <image id="turbo_fire" x="56" y="212.69" width="723" height="387" xlink:href="/img/turbocharger/turbo_fire.png"/>
  </g>  
  <g style="clip-path:url(#id2)">
   <image id="turbo_banknote" x="782.74" y="348.04" width="416" height="199" xlink:href="/img/turbocharger/turbo_2000.png"/>
  </g>
  <g style="clip-path:url(#id3)">
   <image id="turbo_charger" x="0" y="0" width="1600" height="1050" xlink:href="/img/turbocharger/turbo_charger.png"/>
  </g>
  <path id="push_text" class="fil0" d="M454.37 etc."/>
  <g id="turbo_exhaust">
    <path id="turbo_exhaust-short" class="fil0" d="M1198.8 99.6c-0.71,-7.71 5.29,-13.23 9.42,-18.93 -3.36,17.64 -2.42,35.89 2.9,53.08 5.77,19.96 11.87,43.18 -0.61,62.02 5.83,-33.06 -11.87,-63.57 -11.71,-96.17l0 0z"/>
    <path id="turbo_exhaust-long" class="fil0" d="M1237.31 115.01c13.28,28.9 25.96,63.18 12.99,94.43 -6.48,18.32 -24.83,28.83 -31.67,46.95 -5.28,10.07 -2.48,21.55 0.26,31.93 -8.7,-11.64 -15.32,-26.7 -8.8,-41.02 6.93,-26.38 33.64,-43.79 34.47,-72.14 1.36,-20.35 -4.54,-40.15 -7.25,-60.15l0 0z"/>
   </g>
  <g style="clip-path:url(#id4)">
   <image id="turbo_propeller" x="1151.22" y="543.1" width="227" height="227" xlink:href="/img/turbocharger/turbo_propeller.png"/>
  </g>
 </g>
</svg>

字符串
我尝试做什么?我将href修复为xlink:href。在中添加了以下行:

<meta http-equiv="Content-Type" content="application/xhtml+xml">


然后我尝试使用base64-links,如:

<image href="data:image/png;base64,(png-data in base64-code)"/>


我又失败了:-(我已经看了很多线程,我在年底困惑:-(你怎么解决这个问题?非常感谢!

myss37ts

myss37ts1#

我自己解决了这个问题!问题是我在网格中进行了布局,所以现在我必须添加:

svg { width: 100%; }

字符串
就这样,一切都显示出来了:)

相关问题