svg patttern image fill circle is blank in server test, but not in local(file path)

in chrome test
in firefox test
file path in local
in local file path test
<svg height="540" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <pattern id="F206A98C-4789-45DD-94C5-3BE9C1DEFDEB" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-a.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="DF8C6715-B0AC-4F77-ADAD-96C1423942FF" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-b.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="20C528AB-6973-4D60-9F68-BDD1A4A1D58C" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-c-5.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="C3349491-09D5-4693-BC47-855E628B1E79" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-c-3.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="E8C59D0B-51D4-4BDF-B01D-E9F25420E154" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-c-4.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="714CE32D-3E2B-4726-BF3C-83F165C93935" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-c-2.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="F224DC30-29D9-4198-ABC0-0DA7973DCE66" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-c-6.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
        <pattern id="82EC111E-711B-4A67-98AF-EA6538E97F9C" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://c.com/images/avatar-c-1.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image>
        </pattern>
    </defs>
    <path fill="#efdb9a" stroke="#efdb9a" d="M219.4,33.4L13.200000000000017,32.4L-0.3,16.9L13.2,0.3H219.2L219.4,33.4Z" transform="matrix(0.8,0,0,0.8,188.91,283.37)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1.25"></path>
    <path fill="#fbebb6" stroke="#fbebb6" d="M219.4,33.4L13.200000000000017,32.4L-0.3,16.9L13.2,0.3H219.2L219.4,33.4Z" transform="matrix(0.8,0,0,0.8,198.91,283.37)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1.25"></path>
    <text x="251.7" y="298.3" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#7b7b7b" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Arial;" transform="matrix(0.8,0,0,0.8,50.3391,59.6578)" stroke-width="1.25">
        <tspan dy="3.4953125000000114" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">79 reflects 23 likes</tspan>
    </text>
    <path fill="#8ad1db" stroke="#8ad1db" d="M12.6,-0.4L218.79999999999998,0.6L232.39999999999998,16L218.79999999999998,32.6H12.799999999999983L12.6,-0.4Z" transform="matrix(0.8,0,0,0.8,98.5,246.8469)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1.25"></path>
    <path fill="#b1e4ec" stroke="#b1e4ec" d="M12.6,-0.4L218.79999999999998,0.6L232.39999999999998,16L218.79999999999998,32.6H12.799999999999983L12.6,-0.4Z" transform="matrix(0.8,0,0,0.8,88.5,246.8469)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1.25"></path>
    <text x="221.59999999999997" y="261.2269330410536" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#7b7b7b" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Arial;" transform="matrix(0.8,0,0,0.8,44.3203,52.2453)" stroke-width="1.25">
        <tspan dy="3.5003705410535986" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">24 reflects 34 likes</tspan>
    </text>
    <circle cx="375" cy="280" r="65" fill="url(#F206A98C-4789-45DD-94C5-3BE9C1DEFDEB)" stroke="#d7d7d7" stroke-width="13" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="95" cy="280.00000000000006" r="70" fill="url(#DF8C6715-B0AC-4F77-ADAD-96C1423942FF)" stroke="#d7d7d7" stroke-width="14" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <path fill="#ebebeb" stroke="#ebebeb" d="M324.153812868185,216.30608149786627L292.9598330327157,177.23005787692534" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <circle cx="324.153812868185" cy="216.30608149786627" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="292.9598330327157" cy="177.23005787692534" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="269.56434815611374" cy="147.92304016121963" r="25" fill="url(#20C528AB-6973-4D60-9F68-BDD1A4A1D58C)" stroke="#d7d7d7" stroke-width="5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="289.0097846387438" cy="167.3684766438497" r="10" fill="#8ec861" stroke="#ffffff" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <text x="289.0097846387438" y="167.3684766438497" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: FontAwesome; cursor: pointer;" font-size="12px" font-family="FontAwesome">
        <tspan dy="4.001289143849704" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan>
        <title style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">you had follow</title>
    </text>
    <path fill="#ebebeb" stroke="#ebebeb" d="M393.0562025559866,200.52532762409658L404.13362743695996,151.76785990881842" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <circle cx="393.0562025559866" cy="200.52532762409658" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="404.13362743695996" cy="151.76785990881842" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="416.0972463084112" cy="99.10979477631801" r="40" fill="url(#C3349491-09D5-4693-BC47-855E628B1E79)" stroke="#d7d7d7" stroke-width="8" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="447.2099446806193" cy="130.2224931485261" r="10" fill="#c4c4c4" stroke="#ffffff" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <text x="447.2099446806193" y="130.2224931485261" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: FontAwesome; cursor: pointer;" font-size="12px" font-family="FontAwesome">
        <tspan dy="3.995930648526098" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan>
        <title style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">add following</title>
    </text>
    <path fill="#ebebeb" stroke="#ebebeb" d="M448.3759798692788,244.5286654011553L493.3919184393885,222.76711043253894" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <circle cx="448.3759798692788" cy="244.5286654011553" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="493.3919184393885" cy="222.76711043253894" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="546.960885337819" cy="196.87086001988547" r="45" fill="url(#E8C59D0B-51D4-4BDF-B01D-E9F25420E154)" stroke="#d7d7d7" stroke-width="9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="581.9626710065531" cy="231.87264568861957" r="10" fill="#8ec861" stroke="#ffffff" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <text x="581.9626710065531" y="231.87264568861957" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: FontAwesome; cursor: pointer;" font-size="12px" font-family="FontAwesome">
        <tspan dy="4.005458188619571" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan>
        <title style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">you had follow</title>
    </text>
    <path fill="#ebebeb" stroke="#ebebeb" d="M448.4993509020168,315.2149885273615L493.5909772222725,336.8192759674606" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <circle cx="448.4993509020168" cy="315.2149885273615" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="493.5909772222725" cy="336.8192759674606" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="557.1701703338331" cy="367.28132125800033" r="55" fill="url(#714CE32D-3E2B-4726-BF3C-83F165C93935)" stroke="#d7d7d7" stroke-width="11" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="599.9501305956192" cy="410.06128151978646" r="10" fill="#c4c4c4" stroke="#ffffff" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <text x="599.9501305956192" y="410.06128151978646" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: FontAwesome; cursor: pointer;" font-size="12px" font-family="FontAwesome">
        <tspan dy="4.006594019786462" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan>
        <title style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">add following</title>
    </text>
    <path fill="#ebebeb" stroke="#ebebeb" d="M393.333510929025,359.4111602799967L404.5810636462183,408.12966351925843" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <circle cx="393.333510929025" cy="359.4111602799967" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="404.5810636462183" cy="408.12966351925843" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="414.2539589830045" cy="450.02757630502356" r="30" fill="url(#F224DC30-29D9-4198-ABC0-0DA7973DCE66)" stroke="#d7d7d7" stroke-width="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="437.5884827621606" cy="473.36210008417964" r="10" fill="#8ec861" stroke="#ffffff" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <text x="437.5884827621606" y="473.36210008417964" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: FontAwesome; cursor: pointer;" font-size="12px" font-family="FontAwesome">
        <tspan dy="3.9949125841796445" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan>
        <title style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">you had follow</title>
    </text>
    <path fill="#ebebeb" stroke="#ebebeb" d="M324.3764559073178,343.871016772056L293.3190668934023,383.05568963834804" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <circle cx="324.3764559073178" cy="343.871016772056" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="293.3190668934023" cy="383.05568963834804" r="2" fill="#ebebeb" stroke="#ebebeb" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="249.52814838378148" cy="438.30607837981984" r="55" fill="url(#82EC111E-711B-4A67-98AF-EA6538E97F9C)" stroke="#d7d7d7" stroke-width="11" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <circle cx="292.3081086455676" cy="481.08603864160597" r="10" fill="#c4c4c4" stroke="#ffffff" stroke-width="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
    <text x="292.3081086455676" y="481.08603864160597" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: FontAwesome; cursor: pointer;" font-size="12px" font-family="FontAwesome">
        <tspan dy="4.000101141605967" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan>
        <title style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">add following</title>
    </text>
</svg>
In local file path all is ok, on server is not, is it some about render time bug? I try to use snap.svg or Raphaël is the same. At first, I thought may the framework has bug.my html root is lang="en" .
Solution
I find out the reason that the html base tag affect the svg.