Question

我有这样的文本文件

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>

我希望上面代码中的text元素可以像下面代码中的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元素一样表现为内联元素，并根据屏幕尺寸进行更改？

Answer 1

SVG没有像HTML这样的自动布局。这是一种图形语言，要求您指定其中所有对象的位置和大小。

只要您的SVG仅在浏览器中显示，您就可以选择一个选项。您可以使用<foreignObject>在SVG中嵌入一些HTML。

<svg width="500" height="500">
  <rect x="5" y="5" width="490" height="490" rx="20" fill="linen"/>

  <foreignObject x="40" y="40" width="420" height="420">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <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>
    </body>
  </foreignObject>
</svg>

使背景图像SVG像嵌入式元素一样工作

1 个答案: