Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG clippath css3 transforms, inconsistency safari & firefox

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245864
    ronlineDEV
    Participant

    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>
    #245883
    ronlineDEV
    Participant

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.