SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Wellington, NZ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP & dynamic SVG TTF issue

    Hi there, I don't know exactly where to post this so I hope it catches someones attention.

    I have a file called svg.php which puts some TTF text on a curved path and aligns it center. This file displays the TTF font perfectly when I type in the address localhost/AJAX/svg.php?initials=FOO. As expected I get the letters FOO in my font LHF.ttf perfectly aligned to the curve. Below is the code for svg.

    <?php
    header('Content-Type: image/svg+xml');
    ?>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnslink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="380px" height="253px" viewBox="0 0 380 253" enable-background="new 0 0 380 253" xml:space="preserve">
    <defs>
    <style type="text/css"><![CDATA[
    @font-face {
    font-family: 'LHF';
    src: url('localhost/Ajax/LHF.ttf');
    }
    text, textPath {
    font-family:LHF;
    }
    ]]></style>

    <path id="path1" fill="none" d="M50.333,120.339 c92.778-24.903,185.556-24.903,278.334,0"/>

    </defs>
    <text x="100" y="500" font-size="100" style="fill:black;" text-anchor="middle"><textPath xlink:href="#path1" startOffset="50%"><?php echo $_GET["initials"]; ?></textPath></text>
    </svg>

    However the TTF font is dropped and the default font is used when I call on the image from another page, like index.php for example:

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
    var x=document.getElementById("fname").value;
    document.getElementById("words").src="svg.php?initials=" + x;
    }
    </script>
    </head>
    <body>

    <input type="text" id="fname" onkeyup="myFunction()"><br />

    <img src="svg.php?initials=okay" id="words" />

    </body>
    </html>

    Any ideas why the TTF font disappears when calling the image this way?

    Thanks in advance

  2. #2
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Wellington, NZ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved this problem, you must base64 encode the font.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •