【发布时间】：2019-07-23 11:02:21
【问题描述】：
我有这样一个文本文件
A
A+
ABAP
ABC
ABCL
ActionScript
ActiveBasic
Ada
Advanced Boolean Expression Language
Agena
AHDL
ALGOL
Alice
ash
APL
AppleScript
as
Atom
AutoIt
AutoLISP
AWK
B
Bash
BASIC
BCPL
Befunge
BF-BASIC'n
Bioera
BLISS
Bluespec
我编写了一个代码来读取这个文本文件并将其内容用作 SVG 文本元素的内容。我编写了 PHP 代码，以便随机确定文本元素的颜色。
<?php
define("MAX", 1000);
$languages = "";
$data = file("text.txt", FILE_IGNORE_NEW_LINES);
for ($i = 0; $i < MAX; $i++) {
$languages .= "<text x='0' y='15' fill='%23". sprintf("%06x",rand(0,0xffffff)) ."' font-size='20'>". $data[rand(0, count($data) - 1)] . " </text>";
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><?= $languages ?></svg>");
}
</style>
</head>
<body style="background-color:#DDD;">
<div class="box"></div>
</body>
</html>
我希望上面代码中的文本元素可以像下面代码中的 span 元素一样排列。
<span style='color:#31ba5c'>ActiveBasic </span><span style='color:#5dcec7'>Advanced Boolean Expression Language </span><span style='color:#bf7a92'>AutoLISP </span><span style='color:#12fb43'>as </span><span style='color:#430ab5'>Agena </span><span style='color:#2eccdf'>BLISS </span>
<span style='color:#bbd0bf'>BASIC </span><span style='color:#79b352'>Atom </span><span style='color:#c11cf5'>A </span><span style='color:#d49603'>ABAP </span><span style='color:#998720'>ABAP </span><span style='color:#cf1bae'>ActiveBasic </span>
<span style='color:#d89613'>Alice </span>
<span style='color:#cdb6b5'>BASIC </span><span style='color:#dcf2c2'>Befunge </span><span style='color:#49bbba'>AutoIt </span><span style='color:#b6231f'>Alice </span><span style='color:#a2f049'>AppleScript </span><span style='color:#aeabad'>AppleScript </span>
<span style='color:#1b2b3a'>as </span>
<span style='color:#078643'>BF-BASIC'n </span><span style='color:#20d31c'>A+ </span><span style='color:#9cf845'>ActionScript </span><span style='color:#ad8616'>Bash </span><span style='color:#a804a7'>ActionScript </span><span style='color:#e82078'>Befunge </span>
<span style='color:#be5729'>APL </span>
<span style='color:#13e5d0'>BASIC </span><span style='color:#b756a2'>Atom </span><span style='color:#a1e50d'>ABC </span><span style='color:#71e8cc'>ActiveBasic </span><span style='color:#7430c9'>ash </span><span style='color:#ec9cdb'>AutoLISP </span>
<span style='color:#c03e0a'>Alice </span>
<span style='color:#325e95'>AWK </span><span style='color:#7887dc'>AppleScript </span><span style='color:#91cfaa'>BLISS </span><span style='color:#8821a2'>as </span><span style='color:#6de2af'>B </span><span style='color:#2ed5c7'>Agena </span>
<span style='color:#523219'>Ada </span>
<span style='color:#7a6705'>Advanced Boolean Expression Language </span><span style='color:#f6d8df'>AppleScript </span><span style='color:#7dd080'>Bluespec </span><span style='color:#3f4ebd'>Bluespec </span><span style='color:#64f53c'>AutoIt </span>
<span style='color:#a84b17'>A </span>
<span style='color:#c7df22'>ActionScript </span><span style='color:#e59eee'>AutoLISP </span><span style='color:#0e496c'>BASIC </span><span style='color:#350677'>Agena </span><span style='color:#989690'>Bluespec </span><span style='color:#3bfae8'>as </span>
<span style='color:#6e0965'>ALGOL </span>
<span style='color:#808236'>Bluespec </span><span style='color:#c01b5c'>Ada </span><span style='color:#7e4d59'>A+ </span><span style='color:#04cd4f'>AHDL </span><span style='color:#e0feb9'>BLISS </span><span style='color:#dde242'>AHDL </span>
<span style='color:#1ca195'>Befunge </span>
<span style='color:#e056ee'>ash </span><span style='color:#a7bb1e'>A+ </span><span style='color:#cfcf10'>AHDL </span><span style='color:#f68c08'>ABAP </span><span style='color:#f23b1d'>Alice </span><span style='color:#fac576'>Atom </span>
<span style='color:#96ea02'>as </span>
<span style='color:#2cc773'>BCPL </span><span style='color:#aeafe7'>ActionScript </span><span style='color:#cf28e4'>ABCL </span><span style='color:#0a096b'>AppleScript </span><span style='color:#886398'>AutoIt </span><span style='color:#95c909'>Agena </span>
<span style='color:#fe27e1'>AutoLISP </span><span style='color:#63d70f'>B </span><span style='color:#4948b5'>Bioera </span><span style='color:#c20a21'>Bluespec </span><span style='color:#641223'>AppleScript </span><span style='color:#0e542a'>Ada </span>
<span style='color:#07015b'>AutoLISP </span><span style='color:#43bbfa'>Ada </span><span style='color:#84d930'>AppleScript </span><span style='color:#3e3086'>Ada </span><span style='color:#9a971a'>A+ </span><span style='color:#8f68a8'>Bluespec </span>
<span style='color:#f546c0'>ALGOL </span><span style='color:#0042c5'>AWK </span><span style='color:#b51a31'>Bioera </span><span style='color:#a2095e'>Agena </span><span style='color:#1d4694'>as </span><span style='color:#84ef89'>AWK </span>
<span style='color:#716a49'>Bluespec </span>
<span style='color:#533273'>BLISS </span><span style='color:#e66f5a'>A </span><span style='color:#538f61'>APL </span><span style='color:#21e7f0'>ABCL </span><span style='color:#479c01'>Ada </span><span style='color:#1f718d'>Atom </span>
<span style='color:#18fece'>Alice </span>
<span style='color:#a1cd28'>AutoIt </span><span style='color:#8255e8'>APL </span><span style='color:#91d1d2'>as </span><span style='color:#eda45a'>APL </span><span style='color:#51f2e5'>AutoIt </span><span style='color:#0ccd6b'>ActiveBasic </span>
<span style='color:#4520a5'>Befunge </span><span style='color:#4365e8'>A </span><span style='color:#800db7'>Alice </span><span style='color:#c80c70'>AppleScript </span><span style='color:#78749c'>Ada </span><span style='color:#3f086c'>Bluespec </span>
<span style='color:#d0a86f'>BF-BASIC'n </span><span style='color:#b8ca39'>Befunge </span><span style='color:#df5aca'>A </span><span style='color:#011491'>ABAP </span><span style='color:#a4a074'>Bash </span><span style='color:#b94027'>ActiveBasic </span>
<span style='color:#73073f'>AHDL </span><span style='color:#ec1460'>as </span><span style='color:#236656'>Alice </span><span style='color:#dfbe63'>A </span><span style='color:#38721e'>BLISS </span><span style='color:#def098'>Alice </span>
<span style='color:#154950'>Bluespec </span><span style='color:#ef4dcc'>APL </span><span style='color:#67af76'>AutoLISP </span><span style='color:#f40002'>Alice </span><span style='color:#243572'>B </span><span style='color:#ebb3b3'>Befunge </span>
<span style='color:#b0c34c'>ALGOL </span><span style='color:#6889a0'>Atom </span><span style='color:#c0c787'>ABCL </span><span style='color:#1a2cd0'>AutoIt </span><span style='color:#f6be13'>ABC </span><span style='color:#3ef23a'>A+ </span>
<span style='color:#2d8350'>AutoIt </span><span style='color:#6f20cc'>ABAP </span><span style='color:#d31929'>ALGOL </span><span style='color:#72ec3b'>Advanced Boolean Expression Language </span><span style='color:#81af15'>A </span>
<span style='color:#e1fcd4'>A+ </span><span style='color:#f67ef6'>Ada </span><span style='color:#7324c4'>ash </span><span style='color:#9de88f'>Atom </span><span style='color:#7f910b'>Befunge </span><span style='color:#401796'>AppleScript </span>
<span style='color:#00c0df'>Bluespec </span><span style='color:#048021'>Ada </span><span style='color:#fe869d'>BASIC </span><span style='color:#c02088'>Advanced Boolean Expression Language </span><span style='color:#cb82cc'>ABAP </span>
<span style='color:#9ee321'>BCPL </span><span style='color:#91a336'>ABAP </span><span style='color:#d94558'>AHDL </span><span style='color:#6c6797'>BLISS </span><span style='color:#7a9021'>ABAP </span><span style='color:#78f184'>BCPL </span>
<span style='color:#c3c60b'>Atom </span><span style='color:#414259'>Ada </span><span style='color:#96154b'>ALGOL </span>但是，文本元素变得庞大，并且由于字符数而破坏了设计。
如何让 SVG 像上面的 span 元素一样表现得像一个内联元素，并根据屏幕大小进行更改？
【问题讨论】：
-
快速注意，您可以使用
sprintf("%06x",rand(0,0xffffff))生成随机十六进制颜色 -
@NiettheDarkAbsol 谢谢你给了我很好的知识！我的颜色代码生成过程变得更加智能！