为什么我的SVG徽标在不同的计算机上看起来不一样?

时间:2015-08-11 16:14:31

标签: svg cross-browser cross-platform

我尝试使用Inkscape以.svg格式创建徽标。 问题是,它在不同的计算机上看起来有所不同。

上图显示了它在朋友的计算机上的外观: 它似乎是一个不同的字体和/或错误的距离。

下图显示了它在我的计算机上的外观。这就是我想要的样子。 Different look of svg logo

如何让它在每台计算机(任何操作系统,浏览器,显示器......)上看起来都一样,或者使用svg格式是不可能的,所以我必须切换到jpg或png?

这是svg的文本代码:

<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" version="1.1" width="100%" height="100%" viewBox="0 0 224 44" id="svg2" inkscape:version="0.48.4 r9939">
  <metadata id="metadata104">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs4">
    <pattern patternTransform="scale(2.2,1.6)" id="p1" xlink:href="#Packedcircles"/>
    <pattern patternUnits="userSpaceOnUse" width="1" height="1.7" patternTransform="translate(0,0) scale(10,10)" id="Packedcircles">
      <circle style="fill:black;stroke:none" cx="0" cy="0.5" r="0.5" id="circle4759"/>
      <circle style="fill:black;stroke:none" cx="1" cy="0.5" r="0.5" id="circle4761"/>
      <circle style="fill:black;stroke:none" cx="0.5" cy="1.4" r="0.5" id="circle4763"/>
      <circle style="fill:black;stroke:none" cx="0.5" cy="-0.4" r="0.5" id="circle4765"/>
    </pattern>
    <radialGradient cx="18.2" cy="15.7" r="30" id="r1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.812563,-3.0672977)">
      <stop id="stop3131" style="stop-color:#e5e5e5;stop-opacity:1" offset="0"/>
      <stop id="stop3133" style="stop-color:#e5e5e5;stop-opacity:1" offset="0.15516999"/>
      <stop id="stop3135" style="stop-color:#6b6b6b;stop-opacity:1" offset="0.75"/>
      <stop id="stop3137" style="stop-color:#474747;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="15.6" cy="12.1" r="43.5" id="r2" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.812563,-3.0672977)">
      <stop id="stop3140" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3142" style="stop-color:#ffffff;stop-opacity:0.16495" offset="1"/>
    </radialGradient>
    <radialGradient cx="11.8" cy="10.5" r="32.7" id="r3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.98602467,0,0,0.84779,86.699433,-3.0672977)">
      <stop id="stop3150" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3152" style="stop-color:#ffffff;stop-opacity:0" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r4" gradientUnits="userSpaceOnUse">
      <stop id="stop3176" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3178" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3180" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r5" gradientUnits="userSpaceOnUse">
      <stop id="stop3197" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3199" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3201" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r6" gradientUnits="userSpaceOnUse">
      <stop id="stop3218" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3220" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3222" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r7" gradientUnits="userSpaceOnUse">
      <stop id="stop3239" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3241" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3243" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r8" gradientUnits="userSpaceOnUse">
      <stop id="stop3260" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3262" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3264" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r9" gradientUnits="userSpaceOnUse">
      <stop id="stop3281" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3283" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3285" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r10" gradientUnits="userSpaceOnUse">
      <stop id="stop3302" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3304" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3306" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
    <radialGradient cx="19.3" cy="16.9" r="42.2" fx="19.6315" fy="17.1777" id="r11" gradientUnits="userSpaceOnUse">
      <stop id="stop3323" style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
      <stop id="stop3325" style="stop-color:#fefefe;stop-opacity:1" offset="0.37931001"/>
      <stop id="stop3327" style="stop-color:#1d1d1d;stop-opacity:1" offset="1"/>
    </radialGradient>
  </defs>
  <path d="m 120.8 20.4 c 0 10.7 -8.7 19.4 -19.4 19.4 -10.7 0 -19.4 -8.7 -19.4 -19.4 0 -10.7 8.7 -19.4 19.4 -19.4 10.7 0 19.4 8.7 19.4 19.4 z" id="path39" style="fill:url(#r1);stroke:#3f3f3f"/>
  <path d="m 112.4 12.2 a 10.8 9.3 0 0 1 -21.6 0 10.8 9.3 0 1 1 21.6 0 z" id="path41" style="opacity:0.42158999;fill:url(#r3)"/>
  <g transform="matrix(0.98237,0,0,0.98237,76.933643,-2.8343877)" id="g43" style="fill-opacity:0.71344999">
    <path d="m 44.1 20.7 0 0 -0.5 0.6 c -0.3 -0.4 -0.7 -0.7 -1.1 -1.1 l -0.8 0.1 -0.8 -0.9 v 1.1 l 0.7 0.5 0.4 0.5 0.6 -0.7 c 0.1 0.3 0.3 0.5 0.4 0.8 v 0.8 l -0.7 0.7 -1.2 0.8 -0.9 0.9 -0.6 -0.7 0.3 -0.7 -0.6 -0.7 -1 -2.1 -0.8 -0.9 -0.2 0.2 0.3 1.2 0.6 0.7 c 0.4 1 0.7 2 1.2 3 0.7 0 1.4 -0.1 2.1 -0.2 v 0.6 l -0.9 2.1 -0.8 0.9 -0.7 1.4 v 2.3 l 0.2 0.9 -0.4 0.4 -0.8 0.5 -0.8 0.7 0.7 0.8 -0.9 0.8 0.2 0.5 -1.4 1.6 h -0.9 l -0.8 0.5 H 33.6 V 38.3 L 33.4 37 c -0.3 -0.8 -0.6 -1.6 -0.9 -2.5 0 -0.6 0 -1.2 0.1 -1.8 l 0.4 -0.8 -0.5 -1 0 -1.4 -0.7 -0.8 0.3 -1.1 -0.6 -0.6 H 30.6 l -0.3 -0.4 -1 0.6 -0.4 -0.5 -0.9 0.8 -1.9 -2.1 -0.7 -1.7 0.7 -1 -0.4 -0.4 0.8 -1.9 c 0.7 -0.8 1.3 -1.6 2 -2.4 l 1.2 -0.3 1.4 -0.2 0.9 0.2 1.3 1.4 0.5 -0.5 0.7 -0.1 1.2 0.4 h 0.9 l 0.7 -0.6 0.3 -0.4 -0.7 -0.4 -1.1 -0.1 c -0.3 -0.4 -0.6 -0.9 -0.9 -1.2 l -0.4 0.2 -0.1 1.1 -0.7 -0.7 -0.1 -0.8 -0.7 -0.6 h -0.3 l 0.7 0.8 -0.3 0.7 -0.6 0.2 0.4 -0.7 -0.7 -0.3 -0.6 -0.7 -1.1 0.2 -0.1 0.3 -0.7 0.4 -0.4 0.9 -0.9 0.5 -0.4 -0.5 h -0.4 v -1.5 l 0.9 -0.5 h 0.7 l -0.1 -0.6 -0.6 -0.6 1 -0.2 0.5 -0.6 0.4 -0.7 h 0.8 l -0.2 -0.6 0.5 -0.3 v 0.7 l 1.1 0.2 1.1 -0.9 0.1 -0.4 0.9 -0.7 c -0.3 0 -0.7 0.1 -1 0.2 V 10 L 34.2 9.2 H 33.9 l -0.8 0.7 -0.2 0.4 0.2 0.6 -0.4 1 -0.6 -0.3 -0.5 -0.6 -0.8 0.6 -0.3 -1.3 1.4 -0.9 V 8.8 l 0.9 -0.6 1.4 -0.3 0.9 0.3 1.7 0.3 -0.4 0.5 H 35.5 l 0.9 1 0.7 -0.8 0.2 -0.4 c 0 0 2.8 2.5 4.4 5.2 1.6 2.7 2.3 6 2.3 6.6 z" id="path45"/>
    <path d="m 26.1 9.2 -0.1 0.5 0.5 0.3 0.9 -0.6 -0.4 -0.5 -0.6 0.3 -0.3 -0.1" id="path47"/>
    <path d="m 26.9 5.9 -1.9 -0.7 -2.2 0.2 -2.7 0.7 -0.5 0.5 1.7 1.2 v 0.7 l -0.7 0.7 0.9 1.7 0.6 -0.3 0.7 -1.2 c 1.1 -0.3 2.1 -0.7 3.2 -1.2 l 0.9 -2.2" id="path49"/>
    <path d="m 28.8 12.8 -0.3 -0.7 -0.5 0.2 0.1 0.9 0.7 -0.3" id="path51"/>
    <path d="m 29.1 12.6 -0.1 1 0.8 -0.2 0.6 -0.6 -0.5 -0.5 C 29.7 11.9 29.5 11.5 29.3 11 H 28.8 v 0.5 l 0.3 0.3 v 0.7" id="path53"/>
    <path d="m 18.4 28.2 -0.6 -1.2 -1.1 -0.2 -0.6 -1.6 -1.5 0.2 -1.2 -0.9 -1.3 1.2 v 0.2 c -0.4 -0.1 -0.9 -0.1 -1.2 -0.3 l -0.3 -0.8 v -0.9 l -0.9 0.1 0.2 -1.7 H 9.4 L 8.9 22.8 8.4 23.1 7.7 22.6 7.6 21.7 7.8 20.8 8.8 19.9 h 0.9 l 0.1 -0.5 1.1 0.2 0.8 1 0.1 -1.6 1.4 -1.2 0.5 -1.2 1 -0.4 0.6 -0.8 1.3 -0.2 0.7 -1 h -2 l 1.2 -0.6 h 0.9 l 1.2 -0.4 0.1 -0.5 -0.4 -0.4 -0.5 -0.2 0.1 -0.5 -0.4 -0.7 -0.9 0.3 0.1 -0.7 -1 -0.6 -0.8 1.4 0.1 0.5 -0.8 0.3 -0.5 1.1 -0.2 -1 -1.4 -0.6 -0.2 -0.7 1.8 -1.1 0.8 -0.7 0.1 -0.9 -0.4 -0.2 -0.6 -0.1 -0.4 0.9 c 0 0 -0.6 0.1 -0.8 0.2 -2 1.8 -6 5.8 -7 13.3 0 0.2 0.7 1.2 0.7 1.2 l 1.5 0.9 1.5 0.4 0.7 0.8 1 0.7 0.6 -0.1 0.4 0.2 v 0.1 l -0.6 1.6 -0.4 0.7 0.1 0.3 -0.4 1.2 1.3 2.4 1.3 1.2 0.6 0.8 -0.1 1.7 0.4 1 -0.4 1.9 c 0 0 -0 -0 0 0.2 0.1 0.2 2.3 1.5 2.5 1.3 l 0.3 -0.2 -0.1 -0.4 0.6 -0.6 0.2 -0.6 0.9 -0.3 0.7 -1.8 -0.2 -0.5 0.5 -0.7 1.1 -0.2 0.6 -1.3 -0.1 -1.6 0.9 -1.2 0.1 -1.2 C 20.7 29.5 19.5 28.9 18.4 28.2" id="path55"/>
    <path d="m 16.8 9.6 0.7 0.5 h 0.6 V 9.5 l -0.7 -0.3 -0.6 0.4" id="path57"/>
    <path d="M 14.9 8.9 14.5 9.8 h 0.7 L 15.6 9 16.5 8.3 17.3 8.6 18.7 9.6 19.5 8.9 18.7 8.6 18.3 7.8 16.9 7.7 16.8 7.3 16.2 7.4 15.9 8 15.5 7.3 l -0.1 0.3 0.1 0.8 -0.6 0.5" id="path59"/>
    <path d="M 17.5 6.8 17.9 6.5 18.6 6.4 c 0.5 -0.2 1 -0.4 1.5 -0.6 l -0.3 -0.5 -0.9 0.1 -0.4 0.4 -0.7 0.1 -0.6 0.3 -0.3 0.2 -0.2 0.3 0.9 0.2" id="path61"/>
    <path d="m 18.7 14.7 0.4 -0.7 -0.7 -0.5 0.2 1.2" id="path63"/>
  </g>
  <g transform="matrix(0.98237,0,0,0.98237,76.731613,-3.0364147)" id="g65" style="fill:url(#radialGradient4756-227)">
    <g id="g67" style="fill:url(#radialGradient4756-112)">
      <g id="g69" style="fill:url(#radialGradient4756-309)">
        <path d="m 44.1 20.7 0 0 -0.5 0.6 c -0.3 -0.4 -0.7 -0.7 -1.1 -1.1 l -0.8 0.1 -0.8 -0.9 v 1.1 l 0.7 0.5 0.4 0.5 0.6 -0.7 c 0.1 0.3 0.3 0.5 0.4 0.8 v 0.8 l -0.7 0.7 -1.2 0.8 -0.9 0.9 -0.6 -0.7 0.3 -0.7 -0.6 -0.7 -1 -2.1 -0.8 -0.9 -0.2 0.2 0.3 1.2 0.6 0.7 c 0.4 1 0.7 2 1.2 3 0.7 0 1.4 -0.1 2.1 -0.2 v 0.6 l -0.9 2.1 -0.8 0.9 -0.7 1.4 v 2.3 l 0.2 0.9 -0.4 0.4 -0.8 0.5 -0.8 0.7 0.7 0.8 -0.9 0.8 0.2 0.5 -1.4 1.6 h -0.9 l -0.8 0.5 H 33.6 V 38.3 L 33.4 37 c -0.3 -0.8 -0.6 -1.6 -0.9 -2.5 0 -0.6 0 -1.2 0.1 -1.8 l 0.4 -0.8 -0.5 -1 0 -1.4 -0.7 -0.8 0.3 -1.1 -0.6 -0.6 H 30.6 l -0.3 -0.4 -1 0.6 -0.4 -0.5 -0.9 0.8 -1.9 -2.1 -0.7 -1.7 0.7 -1 -0.4 -0.4 0.8 -1.9 c 0.7 -0.8 1.3 -1.6 2 -2.4 l 1.2 -0.3 1.4 -0.2 0.9 0.2 1.3 1.4 0.5 -0.5 0.7 -0.1 1.2 0.4 h 0.9 l 0.7 -0.6 0.3 -0.4 -0.7 -0.4 -1.1 -0.1 c -0.3 -0.4 -0.6 -0.9 -0.9 -1.2 l -0.4 0.2 -0.1 1.1 -0.7 -0.7 -0.1 -0.8 -0.7 -0.6 h -0.3 l 0.7 0.8 -0.3 0.7 -0.6 0.2 0.4 -0.7 -0.7 -0.3 -0.6 -0.7 -1.1 0.2 -0.1 0.3 -0.7 0.4 -0.4 0.9 -0.9 0.5 -0.4 -0.5 h -0.4 v -1.5 l 0.9 -0.5 h 0.7 l -0.1 -0.6 -0.6 -0.6 1 -0.2 0.5 -0.6 0.4 -0.7 h 0.8 l -0.2 -0.6 0.5 -0.3 v 0.7 l 1.1 0.2 1.1 -0.9 0.1 -0.4 0.9 -0.7 c -0.3 0 -0.7 0.1 -1 0.2 V 10 L 34.2 9.2 H 33.9 l -0.8 0.7 -0.2 0.4 0.2 0.6 -0.4 1 -0.6 -0.3 -0.5 -0.6 -0.8 0.6 -0.3 -1.3 1.4 -0.9 V 8.8 l 0.9 -0.6 1.4 -0.3 0.9 0.3 1.7 0.3 -0.4 0.5 H 35.5 l 0.9 1 0.7 -0.8 0.2 -0.4 c 0 0 2.8 2.5 4.4 5.2 1.6 2.7 2.3 6 2.3 6.6 z" id="path71" style="fill:url(#r4)"/>
      </g>
    </g>
    <g id="g73" style="fill:url(#radialGradient4756-612)">
      <g id="g75" style="fill:url(#radialGradient4756-567)">
        <path d="m 26.1 9.2 -0.1 0.5 0.5 0.3 0.9 -0.6 -0.4 -0.5 -0.6 0.3 -0.3 -0.1" id="path77" style="fill:url(#r5)"/>
      </g>
    </g>
    <g id="g79" style="fill:url(#radialGradient4756-773)">
      <g id="g81" style="fill:url(#radialGradient4756-84)">
        <path d="m 26.9 5.9 -1.9 -0.7 -2.2 0.2 -2.7 0.7 -0.5 0.5 1.7 1.2 v 0.7 l -0.7 0.7 0.9 1.7 0.6 -0.3 0.7 -1.2 c 1.1 -0.3 2.1 -0.7 3.2 -1.2 l 0.9 -2.2" id="path83" style="fill:url(#r6)"/>
      </g>
    </g>
    <g id="g85" style="fill:url(#radialGradient4756-502)">
      <g id="g87" style="fill:url(#radialGradient4756-965)">
        <path d="m 28.8 12.8 -0.3 -0.7 -0.5 0.2 0.1 0.9 0.7 -0.3" id="path89" style="fill:url(#r7)"/>
      </g>
    </g>
    <g id="g91" style="fill:url(#radialGradient4756-785)">
      <g id="g93" style="fill:url(#radialGradient4756-135)">
        <path d="m 29.1 12.6 -0.1 1 0.8 -0.2 0.6 -0.6 -0.5 -0.5 C 29.7 11.9 29.5 11.5 29.3 11 H 28.8 v 0.5 l 0.3 0.3 v 0.7" id="path95" style="fill:url(#r8)"/>
      </g>
    </g>
    <g id="g97" style="fill:url(#radialGradient4756-862)">
      <g id="g99" style="fill:url(#radialGradient4756-812)">
        <path d="m 18.4 28.2 -0.6 -1.2 -1.1 -0.2 -0.6 -1.6 -1.5 0.2 -1.2 -0.9 -1.3 1.2 v 0.2 c -0.4 -0.1 -0.9 -0.1 -1.2 -0.3 l -0.3 -0.8 v -0.9 l -0.9 0.1 0.2 -1.7 H 9.4 L 8.9 22.8 8.4 23.1 7.7 22.6 7.6 21.7 7.8 20.8 8.8 19.9 h 0.9 l 0.1 -0.5 1.1 0.2 0.8 1 0.1 -1.6 1.4 -1.2 0.5 -1.2 1 -0.4 0.6 -0.8 1.3 -0.2 0.7 -1 h -2 l 1.2 -0.6 h 0.9 l 1.2 -0.4 0.1 -0.5 -0.4 -0.4 -0.5 -0.2 0.1 -0.5 -0.4 -0.7 -0.9 0.3 0.1 -0.7 -1 -0.6 -0.8 1.4 0.1 0.5 -0.8 0.3 -0.5 1.1 -0.2 -1 -1.4 -0.6 -0.2 -0.7 1.8 -1.1 0.8 -0.7 0.1 -0.9 -0.4 -0.2 -0.6 -0.1 -0.4 0.9 c 0 0 -0.6 0.1 -0.8 0.2 -2 1.8 -6 5.8 -7 13.3 0 0.2 0.7 1.2 0.7 1.2 l 1.5 0.9 1.5 0.4 0.7 0.8 1 0.7 0.6 -0.1 0.4 0.2 v 0.1 l -0.6 1.6 -0.4 0.7 0.1 0.3 -0.4 1.2 1.3 2.4 1.3 1.2 0.6 0.8 -0.1 1.7 0.4 1 -0.4 1.9 c 0 0 -0 -0 0 0.2 0.1 0.2 2.3 1.5 2.5 1.3 l 0.3 -0.2 -0.1 -0.4 0.6 -0.6 0.2 -0.6 0.9 -0.3 0.7 -1.8 -0.2 -0.5 0.5 -0.7 1.1 -0.2 0.6 -1.3 -0.1 -1.6 0.9 -1.2 0.1 -1.2 C 20.7 29.5 19.5 28.9 18.4 28.2" id="path101" style="fill:url(#r9)"/>
      </g>
    </g>
    <g id="g103" style="fill:url(#radialGradient4756-35)">
      <g id="g105" style="fill:url(#radialGradient4756-479)">
        <path d="m 16.8 9.6 0.7 0.5 h 0.6 V 9.5 l -0.7 -0.3 -0.6 0.4" id="path107" style="fill:url(#r10)"/>
      </g>
    </g>
    <g id="g109" style="fill:url(#radialGradient4756-607)">
      <g id="g111" style="fill:url(#radialGradient4756-611)">
        <path d="M 14.9 8.9 14.5 9.8 h 0.7 L 15.6 9 16.5 8.3 17.3 8.6 18.7 9.6 19.5 8.9 18.7 8.6 18.3 7.8 16.9 7.7 16.8 7.3 16.2 7.4 15.9 8 15.5 7.3 l -0.1 0.3 0.1 0.8 -0.6 0.5" id="path113" style="fill:url(#r11)"/>
      </g>
    </g>
    <g id="g115" style="fill:url(#radialGradient4756-880)">
      <g id="g117" style="fill:url(#radialGradient4756-979)">
        <path d="M 17.5 6.8 17.9 6.5 18.6 6.4 c 0.5 -0.2 1 -0.4 1.5 -0.6 l -0.3 -0.5 -0.9 0.1 -0.4 0.4 -0.7 0.1 -0.6 0.3 -0.3 0.2 -0.2 0.3 0.9 0.2" id="path119" style="fill:url(#radialGradient4756-244)"/>
      </g>
    </g>
    <g id="g121" style="fill:url(#radialGradient4756-361)">
      <g id="g123" style="fill:url(#radialGradient4756-234)">
        <path d="m 18.7 14.7 0.4 -0.7 -0.7 -0.5 0.2 1.2" id="path125" style="fill:url(#radialGradient4756-167)"/>
      </g>
    </g>
  </g>
  <path d="m 119.8 20.4 c 0 10.2 -8.2 18.4 -18.4 18.4 -10.2 0 -18.4 -8.2 -18.4 -18.4 0 -10.2 8.2 -18.4 18.4 -18.4 10.2 0 18.4 8.2 18.4 18.4 z" id="path127" style="fill:none;stroke:url(#r2)"/>
  <text x="0" y="32.6" id="text3950" style="font-size:30px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#p1);fill-opacity:1;stroke:#ffffff;stroke-width:0.3;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Droid Serif;-inkscape-font-specification:Droid Serif Bold Italic">
    <tspan x="0" y="32.6" id="tspan3952" style="font-size:30px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:url(#p1);fill-opacity:1;stroke:#ffffff;stroke-width:0.3;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Droid Serif;-inkscape-font-specification:Droid Serif Bold Italic">Zedo</tspan>
  </text>
  <text x="129.7" y="32.7" id="text3954" style="font-size:30px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#p1);fill-opacity:1;stroke:#ffffff;stroke-width:0.3;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Droid Serif;-inkscape-font-specification:Droid Serif Bold Italic">
    <tspan x="129.7" y="32.7" id="tspan3956" style="font-size:30px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:url(#p1);fill-opacity:1;stroke:#ffffff;stroke-width:0.3;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Droid Serif;-inkscape-font-specification:Droid Serif Bold Italic">Media</tspan>
  </text>
</svg>

1 个答案:

答案 0 :(得分:1)

Droid Serif可以从谷歌字体获得,所以没有什么可以阻止你从那里嵌入它。

适用于Chrome和Firefox:

&#13;
&#13;
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700italic);
.droid { font-family: 'Droid Serif', serif; }
&#13;
<svg width="600" height="150" viewBox="0 0 600 150">
  <defs>
    <pattern patternUnits="userSpaceOnUse"
             width="1"
             height="1.7"
             patternTransform="scale(10,10)"
             id="Packedcircles">
      <circle fill="#000" cx="0" cy="0.5" r="0.5"/>
      <circle fill="#000" cx="1" cy="0.5" r="0.5"/>
      <circle fill="#000" cx="0.5" cy="1.4" r="0.5"/>
      <circle fill="#000" cx="0.5" cy="-0.4" r="0.5"/>
    </pattern>
  </defs>
  <text style="font-size:100px; font-style:italic;
               font-weight:bold; fill:url(#Packedcircles);"
        x="20"
        y="120"
        class="droid">Droid Serif Bold Italic">Zedo</text>
</svg>
&#13;
&#13;
&#13;

注意:如果您需要进一步的帮助,请不要在此处发布大量代码;提供minimal, complete, and verifiable example代替。