AnsweredAssumed Answered

ボタンアイコンのSVG画像の一部が、正しく描画されません

Question asked by yasuhiro on May 30, 2015
Latest reply on Jun 9, 2015 by TSGalJ

概要

ボタンアイコンのSVG画像の一部が、正しく描画されません

製品

FileMaker Pro

バージョン

14

オペレーティングシステムのバージョン

全て

問題の内容

アイコンにSVG画像を指定できるようになっていますが、一部のSVGが正しく描画されません。
具体的には、SVGのパス要素にtコマンド(Tコマンドは問題なし)の記述が含まれていると、正しく描画されません。

参考)W3C勧告 二次ベジェ曲線命令
http://www.w3.org/TR/SVG2/paths.html#PathDataQuadraticBezierCommands
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/paths.html#PathDataQuadraticBezierCommands

問題の再現方法

SVGのパス要素にtコマンド(Tコマンドではなく)の記述が含まれている画像を
アイコンのリストに読み込んで指定する。

予想された結果

SVG画像が表示され、アイコンとして使える。

実際の結果

画像は表示されるが、SVGパスがぐちゃぐちゃな表示になります。

追記します。
tコマンドの出現箇所で必ずポイントが左上方へ大きくシフトするようです。
tコマンドだけにポイントの解釈ミスがあるように思います。

表示されたエラーメッセージの正確な内容

メッセージなし。

設定情報

SVGのパス要素のtコマンド(Tコマンドではなく)を全て
l(エル)コマンドに置き換えてみると、なんとか表示内容が理解できるようになりますが、
いかんせん曲線が直線に替わるので、がたがたの画像になってしまいます。
ポケモンのポリゴンみたいになるので使えません。

追記します。
AdobeイラストレーターやInkscapeで保存したSVGにはtコマンドは出現しないようなので、
そういったツールで作成したアイコンだと問題に気づかないと思います。
検証いただけるように、この種のSVGの一例を以下に示します。


<?xml version="1.0" encoding="utf-8"?>
x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" >
t -0.322 0.126 t -0.126 0.322 v 6.272 q 0 0.196 0.126 0.322 t 0.322 0.126
t 0.322 -0.126 t 0.126 -0.322 Z M 19.92 15.6 q 0 0.364 -0.266 0.63 t -0.63 0.266
h -6.006 l -0.714 6.762 q -0.028 0.168 -0.147 0.287 t -0.287 0.119 h -0.014
q -0.378 0 -0.448 -0.378 l -1.064 -6.79 h -5.656 q -0.364 0 -0.63 -0.266 t -0.266 -0.63
q 0 -1.722 1.099 -3.101 t 2.485 -1.379 v -7.168 q -0.728 0 -1.26 -0.532 t -0.532 -1.26
t 0.532 -1.26 t 1.26 -0.532 h 8.96 q 0.728 0 1.26 0.532 t 0.532 1.26 t -0.532 1.26
t -1.26 0.532 v 7.168 q 1.386 0 2.485 1.379 t 1.099 3.101
Z" />




どうぞよろしくお願いします。

対処方法

なし。

ScreenShot_SVG.png

Outcomes