Firefox渲染svgs不正确

Question

我有firefox 43，我的svg样式都没有正确渲染。如果我检查它，会计算样式，但它们根本不显示。 Clip-path和border-radius都不起作用。有任何想法吗？我正在同一个svg中构建clippath和images / circles，在同一个文件中，但在css中应用clippath。

HTML

  <svg class="svg-graphic" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1920 1080">
    <defs>
      <clipPath id="clippath">
      <circle class="clip" cx="200" cy="500" r="50"/>
      <circle class="clip" cx="600" cy="700" r="70"/>
      <circle class="clip" cx="800" cy="400" r="40"/>
      <circle class="clip" cx="1400" cy="600" r="60"/>
      <circle class="clip" cx="1700" cy="300" r="80"/>
      </clipPath>
    </defs>
    <image class="svg-image" xlink:href="http://www.placecage.com/gif/300/300" width="300" height="300" x="50" y="350"/>
    <text class="expand-text" x="200" y="450"
        font-family="Helvetica"
        font-size="25"
        fill="#ffffff">
    <tspan text-anchor="middle" x="200" dy="1.4em">
      Bacon ipsum
    </tspan><tspan text-anchor="middle" x="200" dy="1.4em">
      dolor amet
    </tspan><tspan text-anchor="middle" x="200" dy="1.4em">
      doner prosciutto
    </tspan><tspan text-anchor="middle" x="200" dy="1.4em">
      jerky
      </tspan>
    </text>
    <circle class="circle"  fill="#CC66FF" cx="200" cy="500" r="150"/>
    <text class="svg-text" fill="#ffffff" x="168" y="510"
        font-family="Helvetica"
        font-size="25">
      Hello
    </text>
  </svg>

CSS

.circle{
position: relative;
width: 100%;
padding-bottom: 100%;
z-index: 4;
clip-path: url("#clippath");
}

.svg-image {
z-index: 4;
border-radius: 50%;
clip-path: url(#clippath);
}

svg{
display: block;
position: absolute;
overflow: visible;
}

这是我在firefox上看到的内容

这就是我在Chrome / Safari中看到的内容