To make background-image SVG work like an inline element
Question
I have such a text file
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
I wrote a code that reads this text file and uses its contents as the contents of the SVG text element. I wrote PHP code so that the color of the text element is randomly determined.
<?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>
I was hoping that the text elements in the above code would be arranged like the span elements in the code below.
<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>
However, the text element became bulky and the design broke due to the number of characters.
How can I make SVG behave like an inline element like the above span element and change it according to screen size?
1 answers
solution1
1 ACCPTED 2019-03-01 13:17:54
SVG does not have automatic layout like HTML. It is a graphic language which requires that you specify the positions and sizes of all the objects in it.
You have one option as long as your SVGs are only ever going to be displayed in a browser. You can use a <foreignObject> to embed some HTML in your SVG.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
echo background-image inline style not showing
echo php in an inline css background-image deletes '/' in url
Inline HTML background-image using PHP logic?
Inline PHP If statement returns url outside of background-image style
Hide background-image inline styling from source code
echo background-image
CSS background-image url does not work when using brackets
Background-image is not being displayed
using background-image with php
PHP in Background-image tag
Related Tags