javascript - Canvas in foreign object of svg doesn't apply the transformation -
i have problem use of canvas in svg, using foreignobject.
the probleme canvas inserted in group, have transformation (translation or rotation or scale), canvas isn't printed transformation.
i on chrome.
you can see example there :
https://jsfiddle.net/surre/qjrvxgos/
<body> <svg width="400px" height="300px" viewbox="0 0 400 300" xmlns="http://www.w3.org2000/svg"> <g transform='translate(250,10)rotate(40)'> <foreignobject height="700" width="370" y="0" x="0"> <span xmlns="http://www.w3.org/1999/xhtml"> <canvas id="canvas" width="400px" height="300px" fill-style="#ff0000"></canvas> <div>comment</div> </span> </foreignobject> </g> </svg> </body> the "comment" has transformation, canvas hasn't. if use dev tools , inspect element canvas, see it's in place, transformation.
hoping can me.
thanks
i think neither rotate nor transform canvas. if want rotate/transform can use css style. see below code.
.transform { -ms-transform:translatex(200px) rotate(40deg) translatey(130px); /* ie 9 */ -webkit-transform:translatex(200px) rotate(40deg) translatey(130px); /* chrome, safari, opera */ transform:translatex(200px) rotate(40deg) translatey(130px); background:#ff0000; } this css code work on of browsers. can use class in example following.
<canvas id="canvas" width="400px" height="300px" class="transform"></canvas> you can see on https://jsfiddle.net/qjrvxgos/3/ example update.
Comments
Post a Comment