blocks|key|1758343|text|这是不可能的。如果你想在一个rect元素中显示文本，你应该把它们放在一个组中，文本元素在rect元素之后(这样它就会出现在顶部)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1758344|​|1758345|<svg+xmlns="http://www.w3.org/2000/svg">
++<g>
++++<rect+x="0"+y="0"+width="100"+height="100"+fill="red"></rect>
++++<text+x="0"+y="50"+font-family="Verdana"+font-size="35"+fill="blue">Hello</text>
++</g>
</svg>|code-block|syntax|javascript|1758346|1758347|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This is not possible.  If you want to display text inside a rect element you should put them both in a group with the text element coming after the rect element ( so it appears on top ).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;g&gt;
    &lt;rect x="0" y="0" width="100" height="100" fill="red"&gt;&lt;/rect&gt;
    &lt;text x="0" y="50" font-family="Verdana" font-size="35" fill="blue"&gt;Hello&lt;/text&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1758457|text|以编程方式使用D3|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1758458|body+=+d3.select('body')
svg+=+body.append('svg').attr('height',+600).attr('width',+200)
rect+=+svg.append('rect').transition().duration(500).attr('width',+150)
++++++++++++++++.attr('height',+100)
++++++++++++++++.attr('x',+40)
++++++++++++++++.attr('y',+100)
++++++++++++++++.style('fill',+'white')
++++++++++++++++.attr('stroke',+'black')
text+=+svg.append('text').text('This+is+some+information+about+whatever')
++++++++++++++++.attr('x',+50)
++++++++++++++++.attr('y',+150)
++++++++++++++++.attr('fill',+'black')|code-block|syntax|javascript|1758459|entityMap|0|LINK|mutability|MUTABLE|url|http://d3js.org/^0|7|2|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Programmatically using <a href="http://d3js.org/" rel="noreferrer">D3</a>:</p>

<pre><code>body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
                .attr('height', 100)
                .attr('x', 40)
                .attr('y', 100)
                .style('fill', 'white')
                .attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
                .attr('x', 50)
                .attr('y', 150)
                .attr('fill', 'black')
</code></pre>


blocks|key|1972047|text|<svg+xmlns="http://www.w3.org/2000/svg"+version="1.1">
++++<g>
++<defs>
++++<linearGradient+id="grad1"+x1="0%25"+y1="0%25"+x2="100%25"+y2="0%25">
++++++<stop+offset="0%25"+style="stop-color:rgb(145,200,103);stop-opacity:1"+/>
++++++<stop+offset="100%25"+style="stop-color:rgb(132,168,86);stop-opacity:1"+/>
++++</linearGradient>
++</defs>
++<rect+width="220"+height="30"+class="GradientBorder"+fill="url(#grad1)"+/>
++<text+x="60"+y="20"+font-family="Calibri"+font-size="20"+fill="white"+>My+Code+,+Your+Achivement.......+</text>
++</g>
</svg>+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1972048|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
    &lt;g&gt;
  &lt;defs&gt;
    &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
      &lt;stop offset="0%" style="stop-color:rgb(145,200,103);stop-opacity:1" /&gt;
      &lt;stop offset="100%" style="stop-color:rgb(132,168,86);stop-opacity:1" /&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;rect width="220" height="30" class="GradientBorder" fill="url(#grad1)" /&gt;
  &lt;text x="60" y="20" font-family="Calibri" font-size="20" fill="white" &gt;My Code , Your Achivement....... &lt;/text&gt;
  &lt;/g&gt;
&lt;/svg&gt; 
</code></pre>


blocks|key|1758664|text|您可以使用foreignobject进行更多的控制，并在rect或circle上放置丰富的HTML内容|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1758665|​|1758666|++++<svg+width="250"+height="250"+xmlns="http://www.w3.org/2000/svg">
++++++++<rect+x="0"+y="0"+width="250"+height="250"+fill="aquamarine"+/>
++++++++<foreignobject+x="0"+y="0"+width="250"+height="250">
++++++++++++<body+xmlns="http://www.w3.org/1999/xhtml">
++++++++++++++++<div>Here+is+a+long+text+that+runs+more+than+one+line+and+works+as+a+paragraph</div>
++++++++++++++++<br+/>
++++++++++++++++<div>This+is+<u>UNDER+LINE</u>+one</div>
++++++++++++++++<br+/>
++++++++++++++++<div>This+is+<b>BOLD</b>+one</div>
++++++++++++++++<br+/>
++++++++++++++++<div>This+is+<i>Italic</i>+one</div>
++++++++++++</body>
++++++++</foreignobject>
++++</svg>|code-block|syntax|javascript|1758667|1758668|1758669|📷|atomic|1758670|1758671|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ab0e888d42fd43639675530589c2b233.png|imageAlt^0|5|D|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|L|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|P|3|E|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|Z|U|10|C|$11|12|13|-4]]]]

<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject" rel="nofollow noreferrer">foreignobject</a> for more control and placing rich HTML content over rect or circle</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;svg width="250" height="250" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;rect x="0" y="0" width="250" height="250" fill="aquamarine" /&gt;
        &lt;foreignobject x="0" y="0" width="250" height="250"&gt;
            &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
                &lt;div&gt;Here is a long text that runs more than one line and works as a paragraph&lt;/div&gt;
                &lt;br /&gt;
                &lt;div&gt;This is &lt;u&gt;UNDER LINE&lt;/u&gt; one&lt;/div&gt;
                &lt;br /&gt;
                &lt;div&gt;This is &lt;b&gt;BOLD&lt;/b&gt; one&lt;/div&gt;
                &lt;br /&gt;
                &lt;div&gt;This is &lt;i&gt;Italic&lt;/i&gt; one&lt;/div&gt;
            &lt;/body&gt;
        &lt;/foreignobject&gt;
    &lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://i.stack.imgur.com/yr8pb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yr8pb.png" alt="enter image description here" /></a></p>


blocks|key|1972519|text|使用basic+Javascript通过rect以编程方式显示文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1972520|​|1972521|+var+svg+=+document.getElementsByTagNameNS('http://www.w3.org/2000/svg',+'svg')[0];

++++++++var+text+=+document.createElementNS('http://www.w3.org/2000/svg',+'text');
++++++++text.setAttribute('x',+20);
++++++++text.setAttribute('y',+50);
++++++++text.setAttribute('width',+500);
++++++++text.style.fill+=+'red';
++++++++text.style.fontFamily+=+'Verdana';
++++++++text.style.fontSize+=+'35';
++++++++text.innerHTML+=+"Some+text+line";

++++++++svg.appendChild(text);

++++++++var+text2+=+document.createElementNS('http://www.w3.org/2000/svg',+'text');
++++++++text2.setAttribute('x',+20);
++++++++text2.setAttribute('y',+100);
++++++++text2.setAttribute('width',+500);
++++++++text2.style.fill+=+'green';
++++++++text2.style.fontFamily+=+'Calibri';
++++++++text2.style.fontSize+=+'35';
++++++++text2.style.fontStyle+=+'italic';
++++++++text2.innerHTML+=+"Some+italic+line";

+++++++
++++++++svg.appendChild(text2);

++++++++var+text3+=+document.createElementNS('http://www.w3.org/2000/svg',+'text');
++++++++text3.setAttribute('x',+20);
++++++++text3.setAttribute('y',+150);
++++++++text3.setAttribute('width',+500);
++++++++text3.style.fill+=+'green';
++++++++text3.style.fontFamily+=+'Calibri';
++++++++text3.style.fontSize+=+'35';
++++++++text3.style.fontWeight+=+700;
++++++++text3.innerHTML+=+"Some+bold+line";

+++++++
++++++++svg.appendChild(text3);|code-block|syntax|javascript|1972522|++++<svg+width="510"+height="250"+xmlns="http://www.w3.org/2000/svg">
++++++++<rect+x="0"+y="0"+width="510"+height="250"+fill="aquamarine"+/>
++++</svg>|1972523|1972524|1972525|📷|atomic|offset|length|1972526|1972527|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/10b50efcf067ddfcd384a93538f43b5f.png|imageAlt^0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|17|8|@]|9|@$P|18|Q|19|1|1A]]|A|$]]|$1|R|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

<p>Programmatically display text over rect using basic Javascript</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var svg = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', 20);
        text.setAttribute('y', 50);
        text.setAttribute('width', 500);
        text.style.fill = 'red';
        text.style.fontFamily = 'Verdana';
        text.style.fontSize = '35';
        text.innerHTML = "Some text line";

        svg.appendChild(text);

        var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text2.setAttribute('x', 20);
        text2.setAttribute('y', 100);
        text2.setAttribute('width', 500);
        text2.style.fill = 'green';
        text2.style.fontFamily = 'Calibri';
        text2.style.fontSize = '35';
        text2.style.fontStyle = 'italic';
        text2.innerHTML = "Some italic line";

       
        svg.appendChild(text2);

        var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text3.setAttribute('x', 20);
        text3.setAttribute('y', 150);
        text3.setAttribute('width', 500);
        text3.style.fill = 'green';
        text3.style.fontFamily = 'Calibri';
        text3.style.fontSize = '35';
        text3.style.fontWeight = 700;
        text3.innerHTML = "Some bold line";

       
        svg.appendChild(text3);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;svg width="510" height="250" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;rect x="0" y="0" width="510" height="250" fill="aquamarine" /&gt;
    &lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/GMT2u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GMT2u.png" alt="enter image description here"></a></p>


<p>I want to display some text <em>inside</em> SVG <code>rect</code>. Is it possible?</p>

<p>I tried </p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;g&gt;
    &lt;rect x="0" y="0" width="100" height="100" fill="red"&gt;
      &lt;text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"&gt; Hello &lt;/text&gt;
    &lt;/rect&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</code></pre>

<p>But it does not work.</p>


SVG: text inside rect

我想在SVG rect中显示一些文本。有可能吗？我试过了<svg xmlns="http://www.w3.org/2000/svg">  <g>    <rect x="0" y="0" width="100" height="100" fill="red">      <text x="0" y="10" font...

问SVG:矩形内的文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG:矩形内的文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG:矩形内的文本
EN