svgdr教程·外来对象
<style>.art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<div class="art">
<h2>外来对象</h2>
<p>SVG有一个很特殊的标签 <span class="tRed"><foreignObject></span>，字面意是外来对象，指在 SVG 图形中可以嵌入来自不同 XML 命名空间的元素，例如 XHTML 和 HTML 等。这为SVG画布提供了更为丰富多彩的展示功能。svgdr 将该标签封装为简写形式的指令<span class="tRed"> fObj()</span> ：</p>
<p>指令：<mark>fObj()</mark></p>
<p>参数：<mark>code, x, y, width, height</mark></p>
<p>语法：<mark>fObj(code, x, y, width, height)</mark></p>
<p>参数说明：</p>
<blockquote>
① code - foreignObject标签里的XHTML或HTML代码<br>
② x - foreignObject标签左上角X坐标<br>
③ y - foreignObject标签左上角Y坐标<br>
④ width - foreignObject标签宽度<br>
⑤ height - foreignObject标签高度
</blockquote>
<p>foreignObject 标签最常见的用法是用来装载大段文本或换行文本，这主要是因为 SVG 画布自身给文本换行实属不易，当需要展示较多文本时，人们自然而然想到 foreignObject 标签，使用它来对文本进行排版自由度极高。试看如下例子，我们除了插入较多文字的文本，还有 HTML、行内 CSS 给文本进行排版，最后还使用 HTML 的 img 标签上了一幅图：</p>
<svg id="msvg" width="760" height="400"></svg>
<p>上述效果的 svgdr 绘制代码如下：</p>
<div id="div1"><pre id="pre1">
var htmlStr = `
<div style="font: normal 18px/24px '宋体';">
<p>在使用<foreignObject>时，需要注意的是，虽然它提供了在SVG中嵌入HTML的能力，但并不是所有的HTML和CSS特性都会在所有浏览器中表现一致。因此，在设计SVG图形时，需要对目标浏览器进行充分的测试，以确保兼容性和一致性。</p>
<p>通过使用<foreignObject>元素，开发者可以在SVG图形中嵌入复杂的HTML结构，从而打破了传统SVG内容的限制，实现更为动态和互动的视觉效果。
</p>
<p style="text-align: center;">
<img src="https://638183.freep.cn/638183/small/h4-1.png" alt="" />
</p>
</div>`;
dr.polygon('0 200,380 400,760 200,380 0', 'lightblue');
dr.fObj(htmlStr,20,20,720,380);
</pre></div>
<p>SVG代码如下：</p>
<div id="div2"><pre id="pre2"></pre></div>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
<!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" targete="_blank">返回目录</a></p-->
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr('msvg');
var htmlStr = `
<div style="font: normal 18px/24px '宋体';">
<p>在使用<foreignObject>时，需要注意的是，虽然它提供了在SVG中嵌入HTML的能力，但并不是所有的HTML和CSS特性都会在所有浏览器中表现一致。因此，在设计SVG图形时，需要对目标浏览器进行充分的测试，以确保兼容性和一致性。</p>
<p>通过使用<foreignObject>元素，开发者可以在SVG图形中嵌入复杂的HTML结构，从而打破了传统SVG内容的限制，实现更为动态和互动的视觉效果。
</p>
<p style="text-align: center;">
<img src="https://638183.freep.cn/638183/small/h4-1.png" alt="" />
</p>
</div>`;
dr.polygon('0 200,380 400,760 200,380 0', 'lightblue');
dr.fObj(htmlStr,20,20,720,380);
pre2.textContent = dr.code(msvg);
hl.hl(div1, pre1);
hl.hl(div2, pre2);
</script> 跟着老师学代码。谢谢老师辛苦！早上好！{:4_190:} 还可以加入外来的对象啊。
这个里面加入了文字和图片，看到的熟悉的div，它们都被包裹起来了。
再加个菱形的多边形颜色，一个漂亮的文字说明就出来了{:4_187:} SVG代码代码里好像多了个</foreignobject>，一个就够了吧？
图片的引入也用p标签么？是为了排序吧 红影 发表于 2024-11-23 09:50
SVG代码代码里好像多了个，一个就够了吧？
图片的引入也用p标签么？是为了排序吧
这是标签收尾符。完整的标签是酱紫：
<foreignObject> ... </foreignObject>
xml标记语言支持自闭合标签，像这样：
<img src="..." alt = "" ... />
但是，<foreignObject> 标签不是自闭合标签，必须有收尾符，它才能将 HTML 代码收拢。 本帖最后由 起个网名好难 于 2024-11-23 10:45 编辑 <br /><br /><svg viewBox="0 0 900 600" >
<foreignObject width="540" height="400" x='180' y='50'>
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="padding:8px;width:100%;height:100%;text-align:center;line-height:1.5em;
color:brown;letter-spacing:3px;" id="txtBlock">
<span style="color:red;font:bold 36px 仿宋;">foreignObject</span>
<p style="text-indent:2em;text-align:left;font:400 28px 微软雅黑;">
SVG有一个很特殊的标签 <foreignObject>，字面意是外来对象，指在 SVG 中可以嵌入来自不同 XML 命名空间的元素，例如 XHTML 和 HTML 等。这为SVG画布提供了更为丰富多彩的展示功能。
</p>
</div>
</body>
</foreignObject>
</svg>
<script>
setInterval(() => {txtBlock.animate([{width:'0%',opacity:0},{width:'100%',opacity:1}], {duration:2000, fill:'forwards'})}, 5000);
</script> 马黑黑 发表于 2024-11-23 10:38
这是标签收尾符。完整的标签是酱紫：
...
嗯嗯，知道了，谢谢黑黑解答{:4_187:} 还可以这样啊，外来对象，感觉SVG很强大，但小辣椒对这个SVG还是没有很明白的 小辣椒 发表于 2024-11-23 12:44
还可以这样啊，外来对象，感觉SVG很强大，但小辣椒对这个SVG还是没有很明白的
稀里糊涂也挺好{:4_170:} 马黑黑 发表于 2024-11-23 13:15
稀里糊涂也挺好
{:4_203:} 这个示范效果看上去跟古风窗框似的，很有艺术感。。。
加上那张PNG图片，怪好看。。 SVG图形中嵌入复杂的HTML结构，
HTML可实现的效果很多，
如果都能套进去，那岂不是有无限可能。。 SVG包容性好强啊。。。很厉害。。{:4_199:} 花飞飞 发表于 2024-11-23 18:48
SVG包容性好强啊。。。很厉害。。
还行 小辣椒 发表于 2024-11-23 14:13
{:4_170:} 马黑黑 发表于 2024-11-23 20:24
还行
{:4_173:}不止是还行，是有无限可能 花飞飞 发表于 2024-11-24 18:08
不止是还行，是有无限可能
这也行？ 马黑黑 发表于 2024-11-24 18:09
这也行？
它这么神奇，小白仰慕一下行的。。 花飞飞 发表于 2024-11-24 18:27
它这么神奇，小白仰慕一下行的。。
也好
页:
[1]