Q&A
お世話になります。あるSVGをスプライト化させて読み込みcss等でデザインを行なったところ、fireofxは正常に表示されたのですがgooglechrome、safariは全くスタイルが当たっていない状態で表示されました。
何故なのでしょうか。また解決策も合わせてご教授して頂けると幸いです。
以下ファイルになります。宜しくお願い致します。
php
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, user-scalable=no"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>AnimationDemo</title> 10 <link rel="stylesheet" href="./demo2_transition.css"> 11</head> 12 13<body> 14 <?php include_once('./all.svg') ?> 15 <svg class="likeButton"> 16 <use xlink:href="#likeButton"/> 17 </svg> 18 19</body> 20 21</html>
css
1@charset "UTF-8"; 2* { 3 margin: 0; 4 padding: 0; 5} 6 7html, body { 8 width: 100%; 9 height: 100%; 10} 11 12body { 13 margin: 0; 14 font-family: 'Open Sans', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Helvetica Neue', Helvetica, Arial, sans-serif; 15 background-color: #f0f0f0; 16 display: -webkit-box; 17 display: -ms-flexbox; 18 display: flex; 19 -webkit-box-pack: center; 20 -ms-flex-pack: center; 21 justify-content: center; 22 -webkit-box-align: center; 23 -ms-flex-align: center; 24 align-items: center; 25 overflow: hidden; 26} 27 28body { 29 background-color: #f7f7f7; 30} 31 32.likeButton { 33 cursor: pointer; 34} 35 36.likeButton .border { 37 fill: white; 38} 39 40.likeButton .explosion { 41 -webkit-transform-origin: 250px 250px; 42 transform-origin: 250px 250px; 43 -webkit-transform: scale(0.02); 44 transform: scale(0.02); 45 stroke: #dd4688; 46 fill: none; 47 opacity: 0; 48 stroke-width: 1; 49 transform-origin: 250px 250px; 50} 51 52.likeButton .particleLayer { 53 opacity: 0; 54} 55 56.likeButton .particleLayer circle { 57 opacity: 0; 58 -webkit-transform-origin: 250px 250px; 59 transform-origin: 250px 250px; 60} 61 62.likeButton .heart { 63 fill: rgba(6, 6, 6, 0.24); 64 -webkit-transform: scale(0.8); 65 transform: scale(0.8); 66 -webkit-transform-origin: 250px 250px; 67 transform-origin: 250px 250px; 68} 69 70.likeButton.clicked .explosion { 71 -webkit-animation: explosionAnime 800ms; 72 animation: explosionAnime 800ms; 73 -webkit-animation-fill-mode: forwards; 74 animation-fill-mode: forwards; 75} 76 77.likeButton.clicked .heart { 78 -webkit-animation: heartAnime 800ms; 79 animation: heartAnime 800ms; 80 -webkit-animation-fill-mode: forwards; 81 animation-fill-mode: forwards; 82} 83 84.likeButton.clicked .particleLayer { 85 -webkit-animation: particles 800ms; 86 animation: particles 800ms; 87 -webkit-animation-fill-mode: forwards; 88 animation-fill-mode: forwards; 89} 90 91.likeButton.clicked .particleLayer circle:nth-child(1) { 92 -webkit-animation: particleAnimate1 800ms; 93 animation: particleAnimate1 800ms; 94 -webkit-animation-fill-mode: forwards; 95 animation-fill-mode: forwards; 96} 97 98.likeButton.clicked .particleLayer circle:nth-child(2) { 99 -webkit-animation: particleAnimate2 800ms; 100 animation: particleAnimate2 800ms; 101 -webkit-animation-fill-mode: forwards; 102 animation-fill-mode: forwards; 103} 104 105.likeButton.clicked .particleLayer circle:nth-child(3) { 106 -webkit-animation: particleAnimate3 800ms; 107 animation: particleAnimate3 800ms; 108 -webkit-animation-fill-mode: forwards; 109 animation-fill-mode: forwards; 110} 111 112.likeButton.clicked .particleLayer circle:nth-child(4) { 113 -webkit-animation: particleAnimate4 800ms; 114 animation: particleAnimate4 800ms; 115 -webkit-animation-fill-mode: forwards; 116 animation-fill-mode: forwards; 117} 118 119.likeButton.clicked .particleLayer circle:nth-child(5) { 120 -webkit-animation: particleAnimate5 800ms; 121 animation: particleAnimate5 800ms; 122 -webkit-animation-fill-mode: forwards; 123 animation-fill-mode: forwards; 124} 125 126.likeButton.clicked .particleLayer circle:nth-child(6) { 127 -webkit-animation: particleAnimate6 800ms; 128 animation: particleAnimate6 800ms; 129 -webkit-animation-fill-mode: forwards; 130 animation-fill-mode: forwards; 131} 132 133.likeButton.clicked .particleLayer circle:nth-child(7) { 134 -webkit-animation: particleAnimate7 800ms; 135 animation: particleAnimate7 800ms; 136 -webkit-animation-fill-mode: forwards; 137 animation-fill-mode: forwards; 138} 139 140.likeButton.clicked .particleLayer circle:nth-child(8) { 141 -webkit-animation: particleAnimate8 800ms; 142 animation: particleAnimate8 800ms; 143 -webkit-animation-fill-mode: forwards; 144 animation-fill-mode: forwards; 145} 146 147.likeButton.clicked .particleLayer circle:nth-child(9) { 148 -webkit-animation: particleAnimate9 800ms; 149 animation: particleAnimate9 800ms; 150 -webkit-animation-fill-mode: forwards; 151 animation-fill-mode: forwards; 152} 153 154.likeButton.clicked .particleLayer circle:nth-child(10) { 155 -webkit-animation: particleAnimate10 800ms; 156 animation: particleAnimate10 800ms; 157 -webkit-animation-fill-mode: forwards; 158 animation-fill-mode: forwards; 159} 160 161.likeButton.clicked .particleLayer circle:nth-child(11) { 162 -webkit-animation: particleAnimate11 800ms; 163 animation: particleAnimate11 800ms; 164 -webkit-animation-fill-mode: forwards; 165 animation-fill-mode: forwards; 166} 167 168.likeButton.clicked .particleLayer circle:nth-child(12) { 169 -webkit-animation: particleAnimate12 800ms; 170 animation: particleAnimate12 800ms; 171 -webkit-animation-fill-mode: forwards; 172 animation-fill-mode: forwards; 173} 174 175.likeButton.clicked .particleLayer circle:nth-child(13) { 176 -webkit-animation: particleAnimate13 800ms; 177 animation: particleAnimate13 800ms; 178 -webkit-animation-fill-mode: forwards; 179 animation-fill-mode: forwards; 180} 181 182.likeButton.clicked .particleLayer circle:nth-child(14) { 183 -webkit-animation: particleAnimate14 800ms; 184 animation: particleAnimate14 800ms; 185 -webkit-animation-fill-mode: forwards; 186 animation-fill-mode: forwards; 187} 188
svg
1<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2 <defs> 3 4 <symbol id="likeButton" width="150px" height="150px" viewBox="0 0 500 500"> 5 <circle class="explosion" r="150" cx="250" cy="250"></circle> 6 <g class="particleLayer"> 7 <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"></circle> 8 <circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"></circle> 9 <circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"></circle> 10 <circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"></circle> 11 <circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"></circle> 12 <circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"></circle> 13 <circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"></circle> 14 <circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"></circle> 15 <circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"></circle> 16 <circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"></circle> 17 <circle fill="#CC8EF5" cx="401.5" cy="166" r="13"></circle> 18 <circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"></circle> 19 <circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"></circle> 20 <circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"></circle> 21 </g> 22 <path class="heart" d="M250,187.4c-31.8-47.8-95.5-19.8-95.5,32.2c0,35.2,31.8,60.3,55.7,79.2c24.9,19.7,31.8,23.9,39.8,31.8 c7.9-7.9,14.6-12.6,39.8-31.8c24.3-18.5,55.7-44.4,55.7-79.6C345.5,167.6,281.8,139.7,250,187.4z"></path> 23 </symbol> 24 25 </defs> 26</svg>
回答1件
0
ベストアンサー
use要素の実装がFireFoxとChrome/Safariとで異なるからです.
- FireFoxではuse要素が参照するノードはuse要素直下にコピーされているものとして扱います
- Chrome/Safariではuse要素のレンダリング時に参照先のノードのグラフィックを利用します
NOTE:仕様上はChrome/Safariの方がより正確な動作であり, FireFoxの動作が間違っています
あなたの記述したCSSではuse要素の直下にsymbol要素がコピーされる前提で記述されていますから, FireFoxでは正しく動作します. 一方Chrome/Safariではスタイルを適用する対象がそもそも存在しませんからスタイルが未設定となるのです.
この問題を解決するには次の2つの方法が考えられます.
- use要素を用いない
元々use要素が存在した箇所にsymbol要素の内容をPHPでインクルードしてしまう方法です
シンプルですが確実に動作します
- HTMLの構造を把握した上で適切にスタイルが適用されるようにする
この例ではsymbol要素(#likeButton)配下のノードに対して直接スタイルを指定することでChrome/Safariにおいても正しくスタイル付けされるでしょう
なお後者は慣れるまで制御が難しいかもしれません.
参考）
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_06.htm
投稿2017/07/27 14:19
総合スコア4756
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。