PDA

View Full Version : svg <image> <object> displaying bug



huberte
10 Dec 2012, 6:00 PM
REQUIRED INFORMATION

Sencha Touch version tested:

Sencha Touch 2.1.0
Sencha cmd 3.0.0.250
Browser versions tested against:

Chrome
Stock android
Safari
Description:

svg (which contains <image> tag) are not correctly displayed using <image> tag in sencha code. If you try to add the svg both ways in <image> tag and <object> tag in sencha code, both svg are good. But you'll end with an error with <object> and svg in chrome.
Steps to reproduce the problem:

Add a svg (which contains an <image> tag) in an <image> tag in sencha.
Add the same svg in a <object> tag and in a <image> tag.
The result that was expected:

Load the full svg, including the <image> tag in it
The result that occurs instead:

Only a part of the svg is shown.
Test Case:
Ext.define('svgtest.view.Main', { extend: 'Ext.tab.Panel',

requires: [
'Ext.tab.Panel',
'Ext.Img'
],
config: {
tabBarPosition: 'bottom',


items: [
{
title: 'Welcome',
iconCls: 'home',


styleHtmlContent: true,
scrollable: true,


html: '<img src=./resources/images/1.svg />'
}

]
}
});

and


Ext.define('svgtest.view.Main', { extend: 'Ext.tab.Panel',
requires: [
'Ext.tab.Panel',
'Ext.Img'
],
config: {
tabBarPosition: 'bottom',


items: [
{
title: 'Welcome',
iconCls: 'home',


styleHtmlContent: true,
scrollable: true,


html: '<img src=./resources/images/1.svg /><object data=./resources/images/1.svg>'
}

]
}
});




HELPFUL INFORMATIONScreenshot or Video:

Single svg in an image tag :
40695

Two svg, one in an image tag the other in an object tag :
40696

See this URL for live test case:

Svg in image tag : http://www.sciences-physiques.eu/appli/svg-single/
Svg in image tag and object tag : http://www.sciences-physiques.eu/appli/svg-duo/
Svg displaying fine in chrome : http://www.sciences-physiques.eu/appli/svg-single/resources/images/1.svg
Additional CSS used:

only default ext-all.css
Operating System:

Mint
Android 4.1.2
W7 64bits

mitchellsimoens
11 Dec 2012, 6:41 AM
It looks like this is a browser issue. I tried this without ST loaded and I see the same result:


<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
</head>
<body>
<img src="http://www.sciences-physiques.eu/appli/svg-single/resources/images/1.svg" />
</body>
</html>

huberte
14 Dec 2012, 6:13 PM
thanks Mitchel, you were right !

Still working on it

thing is :

I can have a full width svg with object tag specifying width. But due to the web kit bug concerning mime type, if I add the ST stuff, image freezes, and nothing is responding anymore.

huberte
16 Dec 2012, 8:43 AM
OK, So if you have a svg with no width and height

specifying width in html will freeze sencha's scrolling

html: '<object widht="100%" data=./resources/images/11.svg>'

Any idea why ?


Ext.define('svgtest.view.Main', {
extend: 'Ext.tab.Panel',


requires: [
'Ext.tab.Panel',
'Ext.Img'
],
config: {
tabBarPosition: 'bottom',


items: [
{
title: 'Welcome',
iconCls: 'home',


styleHtmlContent: true,
scrollable: true,


html: '<object widht="100%" data=./resources/images/11.svg>'
}

]
}
});