0

我有一个名为 svg.php 的文件，它将一些 TTF 文本放在弯曲的路径上并将其居中对齐。当我输入地址 localhost/AJAX/svg.php?initials=FOO 时，此文件完美显示 TTF 字体

<?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" xmlns:xlink="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('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>

但是，当我从另一个页面调用图像时，T​​TF 字体会被丢弃，例如 index.php：

<!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" id="words" />

</body>
</html>

有任何想法吗？提前致谢

4

2 回答 2

0

图像必须完全独立，即出于隐私原因，所有内容都在一个文件中。

如果您希望 ttf 字体在 SVG 用作图像（在图像标签或 CSS 图像背景中）时工作，您必须对其进行 base64 编码并将其作为数据 URL 嵌入图像中。

@font-face {
    font-family: 'LHF';
    src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}

或者，您可以根据您的要求使用<object>or<iframe>标记而不是标记。<image>

于 2013-09-11T08:57:52.910 回答
0

问题是封闭标签。<img>在第一种情况（工作）中，您将 svg 加载到页面容器中，在第二种情况（非工作）中，您在标签内加载。

删除标签并将其加载到普通容器中 <div>或<object>直接加载到另一个<svg>标签中，或者您可能希望在浏览器中使用 javascript 加载它。对于后一种情况，我建议您使用 jquery.svg 库。

于 2013-09-11T09:06:05.827 回答