TTF字體未在動態SVG中顯示

Question

我有一個名為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>

但是，當我從另一個頁面調用圖像時，TTF字體將被刪除，例如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>

有任何想法嗎？ 提前致謝

Answer 1

圖像必須完全獨立，即出於隱私原因，所有內容都在一個文件中。

如果要在將SVG用作圖像時使用ttf字體（在圖像標簽或CSS圖像背景中），則必須對它進行base64編碼並將其作為數據URL嵌入圖像中。

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

另外，根據您的要求，您也許可以使用<object>或<iframe>標簽而不是<image>標簽。

Answer 2

問題是封裝標簽。 在第一種情況下（有效），您將svg加載到頁面容器中；在第二種情況下（無效），您將加載到<img>標簽內。

刪除標簽，然后將其加載到普通容器<div>或<object>或直接加載到另一個<svg>標簽中，或者，您可能希望使用瀏覽器中的javascript加載它。 對於以后的情況，我建議您使用jquery.svg庫。

TTF字體未在動態SVG中顯示

問題描述

2 個解決方案

解決方案1
0 已采納 2013-09-11 08:57:52

解決方案2
0 2013-09-11 09:06:05

TTF字體未在動態SVG中顯示

問題描述

2 個解決方案

解決方案1 0 已采納 2013-09-11 08:57:52

解決方案2 0 2013-09-11 09:06:05

解決方案1
0 已采納 2013-09-11 08:57:52

解決方案2
0 2013-09-11 09:06:05