SVG clippath css3 transforms, inconsistency safari & firefox

[ronlineDEV]

I am able to view the animations in the latest chrome on mac.

Firefox doesn’t show the SVGs at all.

Safari only shows the sweeping blue background animations, but not the css3 transforms.

I am running autoprefixr.

http://codepen.io/racpa/pen/rrjvzv

Anybody know what could possibly be the problem?

.projects {
  width: 100%;
  height: 100%;
}
.projects rect {
  fill: white;
  width: 100%;
  height: 100%;
}
.projects .svgFirstBGSweepRight {
  fill: blue;
  transform-origin: left;
  transform: scale(0, 1) translate(0, 0);
  animation-name: svgSweepAnimation;
  animation-duration: .85s;
  animation-delay: .2s;
  animation-fill-mode: forwards;
}
.projects .svgSecondBGSweepRight {
  fill: #FFF;
  transform-origin: left;
  transform: scale(0, 1) translate(0, 0);
  animation-name: svgSweepAnimation .85s;
  animation-duration: .85s;
  animation-delay: 1.05s;
  animation-fill-mode: forwards;
}
.projects .projectFirstSweepRight {
  transform-origin: left;
  transform: scale(0, 1) translate(0, 0);
  animation-name: svgSweepAnimation .7s .5s;
  animation-duration: .7s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
}
.projects .projectSecondSweepRight {
  transform-origin: left;
  transform: scale(0, 1) translate(0, 0);
  animation-name: svgSweepAnimation;
  animation-duration: .7s;
  animation-delay: 1.4s;
  animation-fill-mode: forwards;
}
@keyframes svgSweepAnimation {
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0% {
    transform: scale(0, 1) translate(0, 0);
  }
}
.projectNumber {
  font-size: 1em;
}
.projectName {
  font-size: 1em;
  font-family: 'Separat Regular';
}
.projectInfo {
  font-size: 1em;
}
.colorText rect {
  fill: black;
  width: 100%;
  height: 100%;
}
.colorText .projectFirstSweepRight .projects {
  fill: green;
}
.colorText .projectSecondSweepRight {
  fill: #000;
}
@keyframes tester {
  from {
    transform: scale(1, 1) translate(0, 0);
  }
  to {
    transform: scale(1, 0) translate(0, 0);
  }
}
.tspan-projectNumber {
  display: inline-block;
  animation-name: tester;
  animation-iteration-count: infinite;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  fill: red;
}
.projectName {
  animation-name: tester;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.projectInfo {
  animation-name: tester;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg content-type="image/svg+xml" class="projects" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- Background -->
  <rect class="svgFirstBGSweepRight" x="0" y="0" />
  <rect class="svgSecondBGSweepRight" x="0" y="0" />
  <symbol id="s-projectNumber1" x="50%" y="25%" dy="0.4em">
    Project
  </symbol>
  <defs>
    <clippath id="projectNumber1">
      <text text-anchor="middle" x="50%" y="25%" class="projectNumber">
        Project
      </text>
    </clippath>
  </defs>
  <g clip-path="url(#projectNumber1)" class="colorText">
    <!-- Animated shapes inside text -->
    <rect></rect>
    <rect class="projectFirstSweepRight"></rect>
    <rect class="projectSecondSweepRight"></rect>
  </g>
</svg>

<svg class="projects" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="s-projectName1" x="50%" y="50%" dy="0.4em">
    <text>
      Project Name
    </text>
  </symbol>
  <rect class="svgFirstBGSweepRight" x="0" y="0" />
  <rect class="svgSecondBGSweepRight" x="0" y="0" />
  <clippath id="projectName1">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="projectName">
      Project Name
    </text>
  </clippath>

  <g clip-path="url(#projectName1)" class="colorText">
    <!-- Animated shapes inside text -->
    <rect></rect>
    <rect class="projectFirstSweepRight"></rect>
    <rect class="projectSecondSweepRight"></rect>
  </g>
</svg>

<svg class="projects" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="s-projectInfo1" x="50%" y="75%" dy="0.4em">
    <tspan class="tspan-projectInfo">Twf fwe fwe few</tspan>
  </symbol>
  <rect class="svgFirstBGSweepRight" x="0" y="0" />
  <rect class="svgSecondBGSweepRight" x="0" y="0" />
  <clippath id="projectInfo1">
    <text text-anchor="middle" x="50%" y="75%" dy=".35em" class="projectInfo">
      Project Info
    </text>
  </clippath>


  <g clip-path="url(#projectInfo1)" class="colorText">
    <!-- Animated shapes inside text -->
    <rect></rect>
    <rectclass="projectFirstSweepRight">
      </rect>
      <rect class="projectSecondSweepRight"></rect>
  </g>
</svg>

[ronlineDEV]

I’ve gotten firefox to show visually but – but css transforms on safari and firefox don’t seem like a currently possibility.

[Author]

Posts