グラデーションをかけたオブジェクトのSVGファイルのアセット書き出し
グラデーションをかけたオブジェクトをアセット書き出しでsvgファイルに出力し、出力したsvgファイルを開くとグラデーションが消え黒いオブジェクトになる。
うえちゃん18
shared this idea
-
Ten_A
commented
こちらのサンプルをダウンロードしてテストにて再現しました。
スクリーン用に書き出しのSVG設定にて「縮小」をチェックした場合、オブジェクト実体であるcircleタグのプロパティから直接styleとリンクするclassが欠落します。
この縮小のアルゴリズムが複数の不具合を含んでいると考えられます。実際の結果
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="500" height="500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"><defs><style>.c{fill:url(#b);}</style><radialGradient id="b" cx="250" cy="250" fx="250" fy="250" r="250" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="blue"/><stop offset="0" stop-color="#ff0"/><stop offset=".12046" stop-color="#fafa04"/><stop offset=".24539" stop-color="#eeee10"/><stop offset=".37238" stop-color="#d9d925"/><stop offset=".50083" stop-color="#bcbc42"/><stop offset=".63041" stop-color="#969668"/><stop offset=".76098" stop-color="#696995"/><stop offset=".88982" stop-color="#3333cb"/><stop offset="1" stop-color="blue"/></radialGradient></defs><circle cx="250" cy="250" r="250" fill="#b"/></svg>期待する結果
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="500" height="500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"><defs><style>.c{fill:url(#b);}</style><radialGradient id="b" cx="250" cy="250" fx="250" fy="250" r="250" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="blue"/><stop offset="0" stop-color="#ff0"/><stop offset=".12046" stop-color="#fafa04"/><stop offset=".24539" stop-color="#eeee10"/><stop offset=".37238" stop-color="#d9d925"/><stop offset=".50083" stop-color="#bcbc42"/><stop offset=".63041" stop-color="#969668"/><stop offset=".76098" stop-color="#696995"/><stop offset=".88982" stop-color="#3333cb"/><stop offset="1" stop-color="blue"/></radialGradient></defs><circle cx="250" cy="250" r="250" class="c"/></svg>