[
https://issues.apache.org/jira/browse/CB-6169?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13943071#comment-13943071
]
Adrian May commented on CB-6169:
--------------------------------
I'm not entirely sure you need that info to TRY and reproduce it, but as it
happens it's a Samsung Note GT-N7000 running 4.1.2
> CSS scale transform ignored inside some svg elements
> ----------------------------------------------------
>
> Key: CB-6169
> URL: https://issues.apache.org/jira/browse/CB-6169
> Project: Apache Cordova
> Issue Type: Bug
> Components: Android
> Environment: Android, Linux dev machine
> Reporter: Adrian May
> Labels: css, scale, svg, transform
>
> Try this HTML:
> <!DOCTYPE html>
> <html>
> <head>
> <style>
> .fat { -webkit-transform:scale(6,1); transform:scale(6,1); }
> .lean { -webkit-transform:translate(50,0); transform:translate(50,0); }
> </style>
> </head>
> <body>
> <center><div class='fat'>Blah</div></center>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'
> class='fat'/>
> <text text-anchor='middle' class='fat'>NotFat</text>
> </svg>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'
> class='fat'/>
> <text text-anchor='middle' transform='scale(6,1)'>Bbb</text>
> </svg>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <g transform='scale(6,1)'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3'
> fill='yellow'/>
> <text text-anchor='middle'>Ccc</text>
> </g>
> </svg>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <g class='fat'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3'
> fill='yellow'/>
> <text text-anchor='middle'>NotFat</text>
> </g>
> </svg>
> <br/>
>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'
> class='lean'/>
> <text text-anchor='middle' class='lean'>Aaa</text>
> </svg>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'
> class='lean'/>
> <text text-anchor='middle' transform='translate(50,0)'>Bbb</text>
> </svg>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <g transform='translate(50,0)'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3'
> fill='yellow'/>
> <text text-anchor='middle'>Ccc</text>
> </g>
> </svg>
> <br/>
> <svg id="pic" height='50' viewBox='-100 -15 200 30'>
> <g class='lean'>
> <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3'
> fill='yellow'/>
> <text text-anchor='middle'>Ddd</text>
> </g>
> </svg>
> </body>
> </html>
> The two texts showing NotFat appear fat in chrome and firefox, but not
> cordova. The first four circles should be fat but only the third is. In the
> second set of 4, Cordova behaves the same as FF and Chrome.
--
This message was sent by Atlassian JIRA
(v6.2#6252)
