過去ログ表示


過去ログ 330 を表示

トピック内全 12 記事中の 1 〜 10 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0] [1]

svgのfilter属性の挙動がおかしい
(#50600) このトピック中1番目の投稿
(環境: WinXP SP3/Firefox3.5)

既存かもしれないのですが、filter属性による挙動がローカルとネット上では挙動が異なるようです。
この問題を確認したのはSVGファイルおよび「XHTML + mathML + SVG」のxhtmlファイル上です。

同じようなフィルターを使いまわしたいと思い、 common.svg というファイルを別途用意して以下のような要素を使いました。
<g filter="url(common.svg/#DropShadow)" fill="none" stroke="palegreen" stroke-width="3">
<path d="M 0,100 A 1,1 3.14 0 1 200,100" />
</g>
これはローカル上ではなんの問題もないように見えたのですが、ネット上に上げるとこの要素が表示されなくなってしまいました。

なお、url(../common.svg/#DropShadow) にするとローカル上でもこの要素が表示されません。

一応 Bugzilla で検索はしたのですが検索条件が悪かったために見逃しているかもしれません。

Re: svgのfilter属性の挙動がおかしい
(#50602) このトピック中2番目の投稿
(環境: WinXP SP3/Other)

> <g filter="url(common.svg/#DropShadow)"

common.svg/ は、common.svgというディレクトリーの意味になり、http:だと、(A) デフォールトだと指定してあるindex.htmlのデータ(common.svg/index.htmlの中身)を返す、というような使いかたをします。
(ファイル名を見せない、ファイル名の自由度を増す)
"common.svgというファイル"なのに、"common.svg/"とわざわざ"/"を付加している理由は?
common.svg/だと、サーバーが、(B) common.svgというファイルにリダイレクトするのではなく、(C) ファイルなのでその中身を返してくると、
URLはcommon.svg/のままで、ファイル名部分(最後の"/"の後ろ)はヌルになります。
(ブラウザーは、(A)と(C)を区別できない)
url(common.svg#DropShadow)にすると、どうなりますか?

Re: svgのfilter属性の挙動がおかしい
(#50663) このトピック中3番目の投稿
(環境: WinXP SP3/Firefox3.5)

> url(common.svg#DropShadow)にすると、どうなりますか?
すみません。こちらのコーディングミスだったようです。
望んだとおりに動作しました。

しかし、url(../common.svg#DropShadow) は相変わらずうまくいきません。
CSS とよく似ているので動作は似ているものだと思っていたのですが、規格としてはこれは不正なのでしょうか。
適切な資料を見つけられませんでした。
もし宜しければ日本語に訳した資料を教えていただけないでしょうか。

Re: svgのfilter属性の挙動がおかしい
(#50664) このトピック中4番目の投稿
(環境: WinXP SP3/Other)

> しかし、url(../common.svg#DropShadow) は相変わらずうまくいきません。

"url 相対パス"でググるとトップにでてくるページなどを読むといいでしょう。
http://www.kanzaki.com/docs/html/htminfo-uri.html
そこにファイルをきちんと置いてなければ、単にあなたのチョンボ。
ファイルがきちんと置かれていれば、"common.svg/"でcommon.svgの中身が返ってきても動かないようですし、
htmlと同じ階層あるいはその下であることを前提に書いてある、とかがあるかもしれません。
適当にコピって来て適当なところにおいて適当に指定してみる、のではなく、
どのように書いてあって、どのような場所に置き、どのように指定しなければいけないのか、などをちゃんっと調べてはいかがですか?

Re: svgのfilter属性の挙動がおかしい
(#50674) このトピック中5番目の投稿
(環境: WinXP SP3/Firefox3.5)

上の階層にファイルはあることは確認しました。

相対パスについてはその他でも利用しており、問題はありません。
ただ、(X)HTMLのa要素で href="../example.html" といったことはしたことがあるのですが、SVG のg要素で filter="url(../common.svg#example)" のようなことはしたことがありません。

この url(***) という書き方には、なにか制約があるのでしょうか。

Re: svgのfilter属性の挙動がおかしい
(#50675) このトピック中6番目の投稿
(環境: WinXP SP3/Other)

> ただ、(X)HTMLのa要素で href="../example.html" といったことはしたことがあるのですが、
> SVG のg要素で filter="url(../common.svg#example)" のようなことはしたことがありません。
> この url(***) という書き方には、なにか制約があるのでしょうか。

<g filter="url(...)" の仕様は、cssなどと同じ"url"という名前でURIの形式を利用していて、指定の形式は基本的には通常のURLと同様に見えます。
> http://www.w3.org/TR/SVG/filters.html#FilterProperty
> http://www.w3.org/TR/SVG/struct.html#uriReferenceDefinition
> URI references are defined in either of the following forms:
> <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ]
> -or-
> <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]
>(snip)
> SVG supports two types of URI references:
> * local URI references, where the URI reference does not contain an
> <absoluteURI> or <relativeURI> and thus only contains a fragment
> identifier (i.e., #<elementID> or #xpointer(id<elementID>))
> * non-local URI references, where the URI reference does contain an
> <absoluteURI> or <relativeURI>
> この後に、色々な制約が書いてあります。

common.svg/#exampleではダメなのは当然のようにも見えます。
上に移動した場合は、場所を変えるとcommon.svgの中の各種指定との間に不整合が生じる、ということはないですか?
相対パスではなく絶対パスを指定するとどうなりますか?
下の階層にして相対パスにするとどうなりますか?

Re: svgのfilter属性の挙動がおかしい
(#50682) このトピック中7番目の投稿
(環境: WinXP SP3/Firefox3.5)

> <g filter="url(...)" の仕様は、cssなどと同じ"url"という名前でURIの形式を利用していて、指定の形式は基本的には通常のURLと同様に見えます。
一度、CSS で実験したことがあるのですが、この場合は相対パスでもうまくいきました。参照したのは、画像ファイルです。


>>http://www.w3.org/TR/SVG/filters.html#FilterProperty
>>http://www.w3.org/TR/SVG/struct.html#uriReferenceDefinition
資料を添付していただいたのに申し訳ありませんが、邦訳と思われる以下の文書の内容もよくわかっておりません。
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#FilterProperty
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#uriReferenceDefinition


> 上に移動した場合は、場所を変えるとcommon.svgの中の各種指定との間に不整合が生じる、ということはないですか?
申し訳ありません。仰っている意味が良くわかりませんが、"common.svg"は次のような内容になっています。
/* -- ここから -- */
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="DropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
</svg>
/* -- ここまで -- */
恐らく外部参照のようなものはないと思います。


> 相対パスではなく絶対パスを指定するとどうなりますか?
インターネットとローカルでは動作が違うようです。
・"file:///"を用いたローカル上のテスト
上の階層になると絶対パスでも動作しないようです。下の階層のものは動作するようです。
・"http://"を用いたインターネット上のテスト
ローカル上ではいかなる場合においても期待通りに動作しないようです。インターネット上では期待した通りに動作しました。


> 下の階層にして相対パスにするとどうなりますか?
相対パスも絶対パスも期待した通りに動作します。

(環境: WinXP SP3/Other)

>>下の階層にして相対パスにするとどうなりますか?
> 相対パスも絶対パスも期待した通りに動作します。

>>相対パスではなく絶対パスを指定するとどうなりますか?
> インターネットとローカルでは動作が違うようです。
> ・"file:///"を用いたローカル上のテスト
> 上の階層になると絶対パスでも動作しないようです。下の階層のものは動作するようです。
> ・"http://"を用いたインターネット上のテスト
> ローカル上ではいかなる場合においても期待通りに動作しないようです。
> インターネット上では期待した通りに動作しました。

Firefoxだと、ローカルファイルで上位の階層の場合、「クロスサイト」とみなされる?
(こういったことのために、ローカルでのチェックがしづらくなってしまった...)
エラーコンソールに何かでていないですか?
Opera 10とかIE7/8あたりだとどうなりますか?

(環境: WinXP SP3/Firefox3.5)

> エラーコンソールに何かでていないですか?
エラーコンソールには
「セキュリティエラー: file:///***/===/tests.html のコンテンツが file:///***/common.svg からデータを読み取ることは禁止されています。」
というメッセージが出ていました。


> Opera 10とかIE7/8あたりだとどうなりますか?
新しく実験用ファイルを作り実験してみました。なお、実験に使用したパスは全て相対パスです。
・外部ファイルを作って(X)HTMLファイルに読み込ませる。
+"test1.svg"
内部参照(#DropShadow)
+"test2.svg"
外部参照 -> 同位階層(common.svg#DropShadow)
+"test3.svg"
外部参照 -> 下位階層(temp/common.svg#DropShadow)
+"test4.svg"
外部参照 -> 上位階層(../common.svg#DropShadow)
・XHTML + mathML + SVG 技術を使って内部に記述する。
+内部参照(#DropShadow)
+外部参照 -> 下位階層(temp/common.svg#DropShadow)
+外部参照 -> 上位階層(../common.svg#DropShadow)
以下は実験結果です。

#IE8
SVG の表示方法が分からないため実験できませんでした。

#Opera 10
ローカル、インターネットともに期待通りに動作します。
ただ、「CSS ファイルを読み込もうとすると上手くいかなくなる」というバグがあるようです。

#Google Chrome3
少なくとも、実験に使用した影をつける機能はサポートしていないようです。

#Firefox3.5
ローカルのみ上位階層読み込みが上手くいきませんでした。


本題とは全く関係の無いことなのですが、mathML を SVG 内に書くにはどうしたらよいのでしょうか。
foreignObject 要素を使えば良いようだというところまでは突き止めたのですが、それをどのように使えばよいのかがわかりません。

(環境: WinXP SP3/Firefox3.5)

> 本題とは全く関係の無いことなのですが、mathML を SVG 内に書くにはどうしたらよいのでしょうか。
> foreignObject 要素を使えば良いようだというところまでは突き止めたのですが、それをどのように使えばよいのかがわかりません。

requiredExtensions 属性を用いないことで解決しました。
参考資料:http://www.comfsm.fm/~dleeling/tech/mathml-in-svg.xhtml

インターネットとローカルで動作の違う原因はセキュリティーの問題なのですね。
ただ、画像を表示するだけなので過剰反応と言えるかもしれません。

WADA さんありがとうございました。


[ 次のトピック内容10件 ]
このトピックの全ページ / [0] [1]

返信不可


- Child Tree -