2

Mac OS X 10.6.8 で Google Chrome バージョン 24.0.1312.57 を使用しています。

Safari 5.1.7 では、svg 画像は次のようになります。

svg_サファリ

Chrome では次のようになります。

ここに画像の説明を入力

パスからマーカーがなくなり、パターンのあるパスが黒で塗りつぶされ、Unicode 文字の後ろに A が表示されていることに注意してください。これは、画像が Google Chrome のアドレス バーのデータ uri である場合にのみ発生します。svg 画像を chrome でファイルとして開くと、正しく表示されます。

行末を取り除いてbase64に入れてみましたが、何も修正されていないようです。

これはクロムのバグですか、それとも何か不足していますか?

ソースsvgは次のとおりです。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg_elem">
<title id="doctitle">URI Test</title>
<defs id="thedefs">
<pattern id="ptrn" overflow="visible" patternUnits="userSpaceOnUse"
         x="0" y="0" width="10" height="10"
         viewBox="0 0 10 10" >
    <line fill="none" stroke="#000000" stroke-width="0.5" x1="-5" y1="-5" x2="15" y2="15"/>
</pattern>

<marker id="mtriangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
  <path d="M 0 0 L 10 5 L 0 10 z" fill="#FFF" stroke="#000" stroke-width="1"/>
</marker>

<marker id="mcircle" viewBox="-2 -2 12 12" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
  <circle cx="5" cy="5" r="5" fill="#FFF" stroke="#000" stroke-width="1"/>
</marker>  

</defs>

<g> 

<path 
fill="#F00"
stroke="#000000" 
stroke-width="3" 
marker-start="url(#mtriangle)"
marker-mid="url(#mcircle)"
d="M10,10l0,60l60,0z"/>      

<path 
fill="url(#ptrn)" 
stroke="#000" 
stroke-width="3" 
marker-start="url(#mtriangle)"
marker-mid="url(#mcircle)"
d="M110,110l0,70l70,0z"/>      

<text 
fill="#000" 
x='100'
y='100'
font-size="14pt" 
font-family="serif" 
text-anchor="middle"
space="preserve">N 34° 45' 30" E 300 ft</text>

</g>
</svg>

これがデータ uri です。

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUwIiBoZWlnaHQ9IjEwNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGlkPSJzdmdfZWxlbSI+PHRpdGxlIGlkPSJkb2N0aXRsZSI+VVJJIFRlc3Q8L3RpdGxlPjxkZWZzIGlkPSJ0aGVkZWZzIj4gICAgPHBhdHRlcm4gaWQ9InB0cm4iIG92ZXJmbG93PSJ2aXNpYmxlIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCI+ICAgICAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMC41IiB4MT0iLTUiIHkxPSItNSIgeDI9IjE1IiB5Mj0iMTUiPjwvbGluZT4gICAgPC9wYXR0ZXJuPiAgICA8bWFya2VyIGlkPSJtdHJpYW5nbGUiIHZpZXdCb3g9IjAgMCAxMCAxMCIgcmVmWD0iMCIgcmVmWT0iNSIgbWFya2VyVW5pdHM9InN0cm9rZVdpZHRoIiBtYXJrZXJXaWR0aD0iNCIgbWFya2VySGVpZ2h0PSIzIiBvcmllbnQ9ImF1dG8iPiAgICAgIDxwYXRoIGQ9Ik0gMCAwIEwgMTAgNSBMIDAgMTAgeiIgZmlsbD0iI0ZGRiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4gICAgPC9tYXJrZXI+ICAgIDxtYXJrZXIgaWQ9Im1jaXJjbGUiIHZpZXdCb3g9Ii0yIC0yIDEyIDEyIiByZWZYPSI1IiByZWZZPSI1IiBtYXJrZXJVbml0cz0ic3Ryb2tlV2lkdGgiIG1hcmtlcldpZHRoPSI0IiBtYXJrZXJIZWlnaHQ9IjMiIG9yaWVudD0iYXV0byI+ICAgICAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT4gICAgPC9tYXJrZXI+ICAgIDwvZGVmcz48Zz4gPHBhdGggZmlsbD0iI0YwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjMiIG1hcmtlci1zdGFydD0idXJsKCNtdHJpYW5nbGUpIiBtYXJrZXItbWlkPSJ1cmwoI21jaXJjbGUpIiBkPSJNMTAsMTBsMCw2MGw2MCwweiI+PC9wYXRoPiAgICAgIDxwYXRoIGZpbGw9InVybCgjcHRybikiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBtYXJrZXItc3RhcnQ9InVybCgjbXRyaWFuZ2xlKSIgbWFya2VyLW1pZD0idXJsKCNtY2lyY2xlKSIgZD0iTTExMCwxMTBsMCw3MGw3MCwweiI+PC9wYXRoPiAgICAgICAgICAgICAgPHRleHQgZmlsbD0iIzAwMCIgeD0iMTAwIiB5PSIxMDAiIGZvbnQtc2l6ZT0iMTRwdCIgZm9udC1mYW1pbHk9InNlcmlmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzcGFjZT0icHJlc2VydmUiPk4gMzTCsCA0NScgMzAiIEUgMzAwIGZ0PC90ZXh0PjwvZz48L3N2Zz4JCQk=
4

1 に答える 1

1

マーカーとパターンについてはわかりませんが、文字セットに関しては、Chrome は data:URI に別のデフォルト エンコーディングを使用している必要があります。charset=UTF-8;たとえば、最初に追加すると、次のようになります。

data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB3aWR0aD0iODUwIiBoZWlnaHQ9IjEwNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGlkPSJzdmdfZWxlbSI+PHRpdGxlIGlkPSJkb2N0aXRsZSI+VVJJIFRlc3Q8L3RpdGxlPjxkZWZzIGlkPSJ0aGVkZWZzIj4gICAgPHBhdHRlcm4gaWQ9InB0cm4iIG92ZXJmbG93PSJ2aXNpYmxlIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCI+ICAgICAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMC41IiB4MT0iLTUiIHkxPSItNSIgeDI9IjE1IiB5Mj0iMTUiPjwvbGluZT4gICAgPC9wYXR0ZXJuPiAgICA8bWFya2VyIGlkPSJtdHJpYW5nbGUiIHZpZXdCb3g9IjAgMCAxMCAxMCIgcmVmWD0iMCIgcmVmWT0iNSIgbWFya2VyVW5pdHM9InN0cm9rZVdpZHRoIiBtYXJrZXJXaWR0aD0iNCIgbWFya2VySGVpZ2h0PSIzIiBvcmllbnQ9ImF1dG8iPiAgICAgIDxwYXRoIGQ9Ik0gMCAwIEwgMTAgNSBMIDAgMTAgeiIgZmlsbD0iI0ZGRiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4gICAgPC9tYXJrZXI+ICAgIDxtYXJrZXIgaWQ9Im1jaXJjbGUiIHZpZXdCb3g9Ii0yIC0yIDEyIDEyIiByZWZYPSI1IiByZWZZPSI1IiBtYXJrZXJVbml0cz0ic3Ryb2tlV2lkdGgiIG1hcmtlcldpZHRoPSI0IiBtYXJrZXJIZWlnaHQ9IjMiIG9yaWVudD0iYXV0byI+ICAgICAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT4gICAgPC9tYXJrZXI+ICAgIDwvZGVmcz48Zz4gPHBhdGggZmlsbD0iI0YwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjMiIG1hcmtlci1zdGFydD0idXJsKCNtdHJpYW5nbGUpIiBtYXJrZXItbWlkPSJ1cmwoI21jaXJjbGUpIiBkPSJNMTAsMTBsMCw2MGw2MCwweiI+PC9wYXRoPiAgICAgIDxwYXRoIGZpbGw9InVybCgjcHRybikiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBtYXJrZXItc3RhcnQ9InVybCgjbXRyaWFuZ2xlKSIgbWFya2VyLW1pZD0idXJsKCNtY2lyY2xlKSIgZD0iTTExMCwxMTBsMCw3MGw3MCwweiI+PC9wYXRoPiAgICAgICAgICAgICAgPHRleHQgZmlsbD0iIzAwMCIgeD0iMTAwIiB5PSIxMDAiIGZvbnQtc2l6ZT0iMTRwdCIgZm9udC1mYW1pbHk9InNlcmlmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzcGFjZT0icHJlc2VydmUiPk4gMzTCsCA0NScgMzAiIEUgMzAwIGZ0PC90ZXh0PjwvZz48L3N2Zz4JCQk=

...正常に動作するはずです!

ここにフィドルがあります。

EDITさらに調べてみると (re: マーカーとパターン)、これは Chrome のバグのようです。Chromeが SVG data:URI として埋め込まれている場合 (およびおそらく他の場合は? )の属性値を誤って解釈する (完全に無視する? ) ようです。url(#hash)<object>

これは、この問題を広範囲にテストした別のフィドルです。

Safari 6.0.2、Firefox 18.0.2 (Mac)、Firefox 10.0.1 (Win)、Opera 12.12 (Mac)、および IE 9 ではすべて正常に動作します。<object>(および <embed>と<iframe>) 埋め込みが Chrome で正しく表示されない24.0.1312.57 (Mac/Win) または 26.0.1405.0 canary (Mac) ですが、<img>埋め込みは正常に機能しています。URI エンコードまたは base64 エンコードされた data:URI をアドレス バーに貼り付けても機能しません。

于 2013-02-07T04:33:41.640 に答える