Защо маркерите, шаблоните и символите в Unicode се показват неправилно в uri на svg данни в google chrome?

Използвам google chrome версия 24.0.1312.57 на Mac OS X 10.6.8.

В Safari 5.1.7 svg изображението изглежда така:

svg_safari

В Chrome изглежда така:

въведете описание на изображението тук

Забележете, че маркерите са изчезнали от пътеките и пътеката, която има шаблон, сега има запълване с черно и символът на Unicode има A зад него. Това се случва само ако изображението е uri за данни в адресната лента в google chrome. Ако отворя svg изображението като файл в chrome, то се показва правилно.

Опитах се да премахна краищата на редовете и да ги сложа в base64, но изглежда не коригира нищо.

Това грешка с chrome ли е или пропускам нещо?

Ето изходния 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=

svg google-chrome data-uri
person CovertIII    schedule 07.02.2013    source източник
comment
интересно Виждам грешката и в chrome (windows), но във firefox е добре.   -  person Web_Designer    schedule 07.02.2013
comment
Работи добре във firefox и за мен на Mac.   -  person CovertIII    schedule 07.02.2013
comment
Опитайте да добавите ‹?xml version=1.0 encoding=UTF-8?› първо в документа (или по друг начин се уверете, че кодирането на текста е правилно).   -  person Erik Dahlström    schedule 07.02.2013

Отговори (1)


arrow_upward
1
arrow_downward

Не съм сигурен за маркерите и шаблоните, но що се отнася до набора от знаци, Chrome трябва да използва различно кодиране по подразбиране за data:URI. Ако добавите charset=UTF-8; в началото, напр.:

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

...трябва да работи правилно!

Ето една цигулка.

РЕДАКТИРАНЕ При по-нататъшна проверка (относно: маркери и шарки), изглежда, че това е грешка в Chrome. Изглежда, че Chrome неправилно интерпретира (игнорира напълно?) url(#hash) стойности на атрибут в SVG данни: URI, когато е вграден като <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 кодирани данни: URI в адресната лента също не работи.

person lakenen    schedule 07.02.2013
comment
Благодаря за отговора относно уникод символите и тестването с маркери и шаблони. Чудя се дали грешката вече е докладвана. - person CovertIII; 08.02.2013
comment
Все още нямах време да търся грешките в chrome, но ако ви се иска, давайте ;). Чувствайте се свободни да използвате моите тестови цигулки в доклад за грешка, ако го изпратите. - person lakenen; 08.02.2013