Issue metadata
Sign in to add a comment
|
Transform applied on the parent SVG or SVG group is not applied to the input element added under foreignobject
Reported by
2024yand...@moundsviewschools.org,
Jan 10 2018
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 Steps to reproduce the problem: Add the below code to an html page and open the page in a chrome browser. <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="30px" viewBox="0 0 600 30"> <g transform="translate(30,0)"> <rect x="0px" y="0px" width="170px" height="30px" fill="#77BC1F" fill-opacity="0.45"></rect> <foreignObject x="0px" y="0px" width="600px" height="30px"> <div xmlns="http://www.w3.org/1999/xhtml"> <input value="#1.Hello World! #2.Hello World! #3.Hello World!" /> </div> </foreignObject> </g> </svg> <style> input { font-size: 20px; overflow: hidden; white-space: nowrap; display: inline-block; text-overflow: ellipsis; border: 0; background-color: transparent; line-height: 35px; width: 170px; } </style> What is the expected behavior? Value of the input should be properly shown inside the input field. What went wrong? Value is clipped as the transformation applied to the parent svg or group is not honored by the input field inside the foreignobject element. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 63.0.3239.132 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Issue is only observed when value of the input text is long. In my requirement I am using ellipsis for the text to suffix "..." if the value is too long, so I can not use text-indent to offset the adjust the text position as that will not work as expected if the text is small. I am looking for a generic solution where I do not have to depend on the transforms applied to the parent elements. This is working fine in the Safari browser. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by chrishtr@chromium.org
, Jan 10 2018Status: Duplicate (was: Unconfirmed)