Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

Commit

Permalink
Add test for transformed text problem in Chrome.
Browse files Browse the repository at this point in the history
  • Loading branch information
exupero committed Jan 19, 2018
1 parent 73f1c3d commit 39a42a0
Showing 1 changed file with 12 additions and 15 deletions.
27 changes: 12 additions & 15 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -269,28 +269,24 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
</svg>
</li>

<li id=transformed-text>
<svg width=200 height=200>
<text transform="translate(100,100)rotate(45)">Hello</text>
</svg>
</li>

<li id=custom-font>
<svg width=200 height=200>
<text x=100 y=100 text-anchor=middle dy=14 style="font-family:'Stalemate';font-size:36pt;">Custom Fonts</text>
</svg>
<div style="color:red;">
<p>
Custom fonts are supported but in a very rudimentary way. Note: if you don't see the demo working,
just try clicking on the "Save as PNG" button - it should work.
</p>
<p>
<ul>
<li>
Make sure that the custom font is applied to a non-svg element first. This will help browser to rasterize SVG correctly onto canvas.
</li>
<li>
@font-face declartion has to be inside document stylesheets (not in the external `link` tag)
</li>
<li>
Only first `url()` is inlined into svg (don't have multiple urls in the font-face).
</li>
</ul>
Custom fonts are supported but in a very rudimentary way. Note: if you don't see the demo working,
click "Save as PNG" - it should work.
</p>
<p>Make sure that the custom font is applied to a non-svg element first. This will help browser to rasterize SVG correctly onto canvas.</p>
<p>@font-face declaration has to be inside document stylesheets (not in the external `link` tag)</p>
<p>Only first `url()` is inlined into svg (don't have multiple urls in the font-face).</p>
</div>
</li>
</ul>
Expand Down Expand Up @@ -368,6 +364,7 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
inlineTest('With opacity', $('#opacity'));
inlineTest('When setting xmlns on foreign object children', $('#xmlns-override'));
inlineTest('When using HTML entites', $('#entities'));
inlineTest('Transformed text', $('#transformed-text'));
inlineTest('With custom fonts', $('#custom-font'));

var $sandbox = $('#sandbox');
Expand Down

0 comments on commit 39a42a0

Please sign in to comment.