使背景图像SVG像嵌入式元素一样工作
[英]To make background-image SVG work like an inline element
问题描述
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. 我编写了一个代码，该代码读取此文本文件并将其内容用作SVG文本元素的内容。 I wrote PHP code so that the color of the text element is randomly determined. 我编写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>
I was hoping that the text elements in the above code would be arranged like the span elements in the code below. 我希望上面代码中的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>
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? 如何使SVG像上面的span元素一样表现为内联元素，并根据屏幕尺寸进行更改？
1 个解决方案
解决方案1
1 已采纳 2019-03-01 13:17:54
SVG does not have automatic layout like HTML. SVG没有像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. 只要您的SVG仅在浏览器中显示，您就可以选择一个选项。 You can use a <foreignObject> to embed some HTML in your 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
回声背景图像内联样式未显示 - echo background-image inline style not showing
在内联css背景图像中回显php在url中删除'/' - echo php in an inline css background-image deletes '/' in url
使用PHP逻辑的内联HTML背景图像？ - Inline HTML background-image using PHP logic?
内联PHP If语句返回背景图像样式之外的url - Inline PHP If statement returns url outside of background-image style
隐藏源代码中的背景图像内联样式 - Hide background-image inline styling from source code
回声背景图像 - echo background-image
CSS背景图片网址在使用方括号时不起作用 - CSS background-image url does not work when using brackets
背景图像未显示 - Background-image is not being displayed
用PHP使用背景图像 - using background-image with php
背景图片标签中的 PHP - PHP in Background-image tag
相关标签