Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-6169

CSS scale transform ignored inside some svg elements

    XMLWordPrintableJSON

Details

    • Bug
    • Status: Closed
    • Major
    • Resolution: Won't Fix
    • None
    • None
    • cordova-android
    • Android, Linux dev machine

    Description

      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.

      Attachments

        Activity

          People

            bowserj Joey Robert Bowser
            adrianmay Adrian May
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: