1. ホーム
  2. 質問と答え
  3. SVGマスクを回転させる

SVGマスクを回転させる

2016-06-22 5 views
3

このSVGマスクを回転させて、中心から回転させる方法を見つけるのは苦労しています。言い換えれば、私は無限ループになる回転効果を目指しています。また、なぜFirefoxで回転しないのかわかりません。何か案は？SVGマスクを回転させる

ここJSFiddle

HTMLです：

<body class="home"> 
    <svg preserveAspectRatio="xMidYMid slice"> 
    <svg version="1.1" id="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="100%" height="100%" xml:space="preserve"> 
     <mask id="mask" maskUnits="userSpaceOnUse"> 
     <rect x="0" y="0" width="100%" height="100%"/> 
      <svg version="1.1" baseProfile="tiny" class="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" y="0px" viewBox="0 0 241.5 242" xml:space="preserve"> 
      <g class ="first-ring-path"> 
       <g> 
       <g> 
        <path d="M118.4,237.5c-8.5,0-16.9-0.9-25.1-2.7c-2.8-0.6-4.6-3.4-3.9-6.2c0.6-2.8,3.4-4.5,6.2-3.9 
        c7.5,1.6,15.2,2.5,22.9,2.5c20.7,0,40.7-6,58-17.3c2.4-1.6,5.6-0.9,7.2,1.5c1.6,2.4,0.9,5.6-1.5,7.2 
        C163.1,230.9,141.1,237.5,118.4,237.5z"/> 
       </g> 
       <g> 
        <path d="M192.5,209.2c-1.4,0-2.8-0.6-3.9-1.7c-1.9-2.1-1.7-5.4,0.4-7.3c3.9-3.5,7.5-7.3,10.9-11.3 
        c1.8-2.2,5.1-2.5,7.3-0.7s2.5,5.1,0.7,7.3c-3.6,4.4-7.7,8.6-11.9,12.4C195,208.7,193.7,209.2,192.5,209.2z"/> 
       </g> 
       <g> 
        <path d="M214.6,181.9c-0.9,0-1.8-0.2-2.6-0.7c-2.5-1.4-3.3-4.6-1.9-7.1c9.3-16,14.1-34.3,14.1-52.9 
        c0-4.9-0.3-9.8-1-14.5c-0.4-2.8,1.6-5.4,4.4-5.8c2.8-0.4,5.4,1.6,5.8,4.4c0.7,5.2,1.1,10.6,1.1,15.9c0,20.4-5.4,40.5-15.5,58.1 
        C218.1,181,216.4,181.9,214.6,181.9z"/> 
       </g> 
       <g> 
        <path d="M224.7,94.1c-2.2,0-4.3-1.4-4.9-3.7c-2.3-7.7-5.6-15.1-9.6-22.1c-1.4-2.5-0.6-5.6,1.9-7.1 
        c2.5-1.4,5.6-0.6,7.1,1.9c4.4,7.7,8,15.8,10.5,24.2c0.8,2.7-0.7,5.6-3.4,6.4C225.7,94,225.2,94.1,224.7,94.1z"/> 
       </g> 
       <g> 
        <path d="M206.4,58.7c-1.5,0-3.1-0.7-4.1-2c-10.9-14.2-25.3-25.4-41.7-32.5c-2.6-1.1-3.8-4.2-2.7-6.8 
        s4.2-3.8,6.8-2.7c17.9,7.8,33.7,20.2,45.7,35.7c1.7,2.3,1.3,5.5-0.9,7.2C208.6,58.3,207.5,58.7,206.4,58.7z"/> 
       </g> 
       <g> 
        <path d="M41,46.7c-1.3,0-2.7-0.5-3.7-1.6c-2-2-1.9-5.3,0.1-7.3C59.2,16.6,88,5,118.4,5c1.6,0,3.2,0,4.7,0.1 
        c2.9,0.1,5.1,2.5,5,5.4c-0.1,2.9-2.5,5.1-5.4,5c-1.4-0.1-2.9-0.1-4.3-0.1c-27.7,0-53.9,10.6-73.7,29.9 
        C43.6,46.2,42.3,46.7,41,46.7z"/> 
       </g> 
       <g> 
        <path d="M7.5,119c-0.1,0-0.2,0-0.4,0c-2.8-0.2-5-2.7-4.8-5.5c0.3-4,0.8-8.1,1.5-12.1C6,88.3,10.5,75.7,17,64.2 
        c1.4-2.5,4.6-3.4,7-2c2.5,1.4,3.4,4.6,2,7c-5.9,10.5-10,21.9-12.1,33.9c-0.6,3.6-1.1,7.4-1.3,11C12.4,116.9,10.2,119,7.5,119z"/> 
       </g> 
       <g> 
        <path d="M58.6,220c-1,0-1.9-0.3-2.8-0.8c-26.2-16.7-44.8-43.7-51.2-74c-0.6-2.8,1.2-5.5,4-6.1s5.5,1.2,6.1,4 
        c5.8,27.6,22.8,52.1,46.6,67.4c2.4,1.5,3.1,4.7,1.6,7.1C61.9,219.2,60.3,220,58.6,220z"/> 
       </g> 
       </g> 
      </g> 
      </svg> 
     </mask> 
    </svg> 
    <rect id="rect" mask="url(#mask)" x="0" y="0" width="5000px" height="5000px"/> 
    </svg> 
</body>

CSS：中心から回転のための

html{ 
    height: 100%; 
    overflow:hidden; 
    font-weight:100; 
} 
body { 
    height: 100%; 
    overflow:hidden; 
}  
svg { 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
} 
svg mask rect { 
    fill: rgba(255, 255, 255, 0.6); 
} 
svg > rect { 
    fill: white; 
    // -webkit-mask: url(#mask); 
    // -moz-mask: url(#mask); 
    // mask: url(#mask); 
} 
.first-ring-path{ 
    -moz-animation:spin 20s infinite linear; 
    -webkit-animation:spin 20s infinite linear; 
    animation:spin 20s infinite linear; 
} 
@-moz-keyframes spin { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(360deg); } 
} 
@-moz-keyframes spinoff { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(-360deg); } 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform:rotate(0deg); } 
    100% { -webkit-transform:rotate(360deg); } 
} 
@-webkit-keyframes spinoff { 
    0% { -webkit-transform:rotate(0deg); } 
    100% { -webkit-transform:rotate(-360deg); } 
}

出典

2016-06-22 bhood

+0

CSSアニメーションは、現在（Firefoxでマスク上では動作しません。それは既知のバグです）。 SMILはうまくいくはずです。 –

答えて

1

は、私はちょうどSMIL animation issueに同じコーディングを投稿言います。唯一の7ライナーは、両方がold solution: How to Keep Text Orientation....

編集に基づいています：最新のFFのV47でテスト（June2016）

var myPath = document.getElementById('pathRotate'); 
 
var i = 0; 
 
var intervalID = window.setInterval(myCallback, 30); 
 

 
function myCallback() { 
 
// Rotate the square by a small amount. 
 
    if (i == 360) { i = 0} 
 
    myPath.setAttribute("transform", "rotate(" + i + ", 121,121)"); 
 
    ++i; 
 
}
body { 
 
    background-color: red; 
 
} 
 
.home { 
 
    background-image: url('../images/ontocore_home_background.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
} 
 
.home-overlay { 
 
    height: 4000; 
 
    background-image: url('../images/ontocore_home_overlay.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow:hidden; 
 
} 
 

 
svg mask rect { 
 
    fill: rgba(255, 255, 255, 0.6); 
 
} 
 
svg > rect { 
 
    fill: white; 
 
    // -webkit-mask: url(#mask); 
 
    // -moz-mask: url(#mask); 
 
    // mask: url(#mask); 
 
}
<body class="home"> 
 
    <svg preserveAspectRatio="xMidYMid slice"> 
 
    <svg version="1.1" id="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
width="100%" height="100%" xml:space="preserve"> 
 

 
    <mask id="mask" maskUnits="userSpaceOnUse"> 
 
     <rect x="0" y="0" width="100%" height="100%"/> 
 
     <svg version="1.1" baseProfile="tiny" class="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 
     x="0px" y="0px" viewBox="0 0 241.5 242" xml:space="preserve"> 
 
     <g id="pathRotate" class ="first-ring-path"> 
 
     <g> 
 
      <g> 
 
      <path d="M118.4,237.5c-8.5,0-16.9-0.9-25.1-2.7c-2.8-0.6-4.6-3.4-3.9-6.2c0.6-2.8,3.4-4.5,6.2-3.9 
 
       c7.5,1.6,15.2,2.5,22.9,2.5c20.7,0,40.7-6,58-17.3c2.4-1.6,5.6-0.9,7.2,1.5c1.6,2.4,0.9,5.6-1.5,7.2 
 
       C163.1,230.9,141.1,237.5,118.4,237.5z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M192.5,209.2c-1.4,0-2.8-0.6-3.9-1.7c-1.9-2.1-1.7-5.4,0.4-7.3c3.9-3.5,7.5-7.3,10.9-11.3 
 
       c1.8-2.2,5.1-2.5,7.3-0.7s2.5,5.1,0.7,7.3c-3.6,4.4-7.7,8.6-11.9,12.4C195,208.7,193.7,209.2,192.5,209.2z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M214.6,181.9c-0.9,0-1.8-0.2-2.6-0.7c-2.5-1.4-3.3-4.6-1.9-7.1c9.3-16,14.1-34.3,14.1-52.9 
 
       c0-4.9-0.3-9.8-1-14.5c-0.4-2.8,1.6-5.4,4.4-5.8c2.8-0.4,5.4,1.6,5.8,4.4c0.7,5.2,1.1,10.6,1.1,15.9c0,20.4-5.4,40.5-15.5,58.1 
 
       C218.1,181,216.4,181.9,214.6,181.9z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M224.7,94.1c-2.2,0-4.3-1.4-4.9-3.7c-2.3-7.7-5.6-15.1-9.6-22.1c-1.4-2.5-0.6-5.6,1.9-7.1 
 
       c2.5-1.4,5.6-0.6,7.1,1.9c4.4,7.7,8,15.8,10.5,24.2c0.8,2.7-0.7,5.6-3.4,6.4C225.7,94,225.2,94.1,224.7,94.1z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M206.4,58.7c-1.5,0-3.1-0.7-4.1-2c-10.9-14.2-25.3-25.4-41.7-32.5c-2.6-1.1-3.8-4.2-2.7-6.8 
 
       s4.2-3.8,6.8-2.7c17.9,7.8,33.7,20.2,45.7,35.7c1.7,2.3,1.3,5.5-0.9,7.2C208.6,58.3,207.5,58.7,206.4,58.7z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M41,46.7c-1.3,0-2.7-0.5-3.7-1.6c-2-2-1.9-5.3,0.1-7.3C59.2,16.6,88,5,118.4,5c1.6,0,3.2,0,4.7,0.1 
 
       c2.9,0.1,5.1,2.5,5,5.4c-0.1,2.9-2.5,5.1-5.4,5c-1.4-0.1-2.9-0.1-4.3-0.1c-27.7,0-53.9,10.6-73.7,29.9 
 
       C43.6,46.2,42.3,46.7,41,46.7z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M7.5,119c-0.1,0-0.2,0-0.4,0c-2.8-0.2-5-2.7-4.8-5.5c0.3-4,0.8-8.1,1.5-12.1C6,88.3,10.5,75.7,17,64.2 
 
       c1.4-2.5,4.6-3.4,7-2c2.5,1.4,3.4,4.6,2,7c-5.9,10.5-10,21.9-12.1,33.9c-0.6,3.6-1.1,7.4-1.3,11C12.4,116.9,10.2,119,7.5,119z"/> 
 
      </g> 
 
      <g> 
 
      <path d="M58.6,220c-1,0-1.9-0.3-2.8-0.8c-26.2-16.7-44.8-43.7-51.2-74c-0.6-2.8,1.2-5.5,4-6.1s5.5,1.2,6.1,4 
 
       c5.8,27.6,22.8,52.1,46.6,67.4c2.4,1.5,3.1,4.7,1.6,7.1C61.9,219.2,60.3,220,58.6,220z"/> 
 
      </g> 
 
     </g> 
 
     </g> 
 
     </svg> 
 
    </mask> 
 
    < 
 
</svg> 
 
    <rect id="rect" mask="url(#mask)" x="0" y="0" width="5000px" height="5000px"/> 
 
    </svg> 
 

 

 
</body>

出典

2016-06-24 17:50:32

+0

これはうまくいった - ありがとう@アルビンK.！ – bhood

1

変換起源を追加：50％50％が、

次のように：

.first-ring-path{ 
     -moz-animation:spin 20s infinite linear; 
     -webkit-animation:spin 20s infinite linear; 
     animation:spin 20s infinite linear; 
     transform-origin: 50% 50%; 
    }

出典

2016-06-22 20:54:37

+0

これは本当に機能しますか？ [マスクのコンテンツのCSSアニメーションができなかったことは間違いありませんでした。]（https://bugzilla.mozilla.org/show_bug.cgi?id=1118710） –

+0

Chromeで動作...申し訳ありませんが、私は十字架を構築しませんでした-browserパッケージ。 –

+0

はい、@RobertLongsonは、CSSのアニメーションがFirefoxでマスク用に動作していない点については正しいです。ブラウザのサポートが向上するjQueryの代替品があると思いますか？ – bhood

関連する問題

 関連する問題