SVG 中的 HTML

2023-11-22

我想在一个文件中添加一些 HTML 标记SVG绘画。

html-in-svg

据我所知,这是不可能的SVG.

图像显示在浏览器中。

有没有办法画HTML上面的SVG?

因为我想使用CSS/table特点HTML the SVG <text>元素还不够。


用户@enxaneta 向我指出异物.

它工作正常(即使在网络浏览器 Edge 中)。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
div {
  color: white;
  font: 18px serif;
  height: 100%;
  overflow: auto;
}
  </style>
 
  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
<!--
  In the context of SVG embedded in an HTML document, the XHTML 
  namespace could be omitted, but it is mandatory in the 
  context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
  porta vel dui convallis, rutrum imperdiet eros. Aliquam
  erat volutpat.
</div>
  </foreignObject>
</svg>

代码笔:https://codepen.io/guettli/pen/RwwBxQL

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SVG 中的 HTML 的相关文章

  • 如何通过单击链接并确认弹出窗口来检查两个条件?

    我是 JavaScript 新手 有 2 个 html 链接 li a class dropdown item confirm href wtdata a li li a class dropdown item confirm href f
  • Knockout.js:有条件绑定div的title属性

    我的页面上有一个 viewModel 它保存一些设备当前状态概述的数据 到目前为止 除了一个问题之外 一切都运行良好 我需要根据 viewModel 中的另一个值设置 div 元素的 title 属性 我知道您基本上可以像这样设置 titl
  • 使用 classed("active",true) 鼠标悬停时 D3 颜色变化

    我是 js 和 D3 的新手 我已经生成了某种热图 并且想使用 D3 的 on mouseover 更改图块的颜色 我可以显式更改颜色 但想使用 CSS 活动规则 可能是一些简单的东西可以修复 任何帮助将不胜感激 完整代码如下 Thanks
  • Facebook Instant Game - 上传捆绑的 zip 文件会导致 Web 托管出现 SDK 参考错误

    当我尝试上传简单的游戏 应用程序时 我收到一条错误消息 游戏必须通过我们的 CDN 引用我们支持的 SDK 之一 不过我已经给出了 SDK 参考 难道不是这个吗 我也浏览了 facebook 文档的 SDK 参考 但它对我不起作用 有人以前
  • 如何使用C从http下载文件?

    最近几天我试图弄清楚如何从 URL 下载文件 这是我对套接字的第一个挑战 我用它来了解协议 所以我想在没有 cURL 库的情况下只用 C 语言来完成它 我搜索了很多 现在我可以打印页面的源代码 但我认为这与文件不同 我不必只将接收到的数据从
  • BS3 - img 响应类 - 为什么没有最大高度?

    引导程序 3 包括 img responsive班级 应用这些 css 设置 display block height auto max width 100 为什么没有max height 100 我发现添加这个使得图片的高度也适合 但我不
  • 不透明度如何影响元素顺序?

    我发现 CSS 有一个非常奇怪的行为opacity与浮动元素相结合 考虑以下 HTML div div Right button div div div Overlay div 最后div将覆盖前两个浮动的 删除不透明度会将最新的 div
  • 垂直滚动,与 div/元素/锚点对齐/对齐

    我发现了一些可爱的网站 http www mini jp event campaign big point http www mini jp event campaign big point http www twenty8twelve c
  • Selenium 查看鼠标/指针

    有什么方法可以在运行测试时真正看到硒鼠标吗 要么是 Windows 光标图像 要么是某种点或十字线或任何东西 我正在尝试使用拖放功能selenium and java in an HTML5Web 应用程序 并且能够看到光标以了解它实际在做
  • 手动渲染 Twig 字符串时禁用 HTML 转义

    我有以下代码将字符串呈现为 HTML 输出 如何阻止它转义 HTML 文本 template who bar params array who gt Foo s twig new Twig Environment new Twig Load
  • Bootstrap Html 列宽度太大

    var parentDiv document getElementById cc var statementDiv document createElement div var statementName document createEl
  • 将 HTML5 转换为独立的 Android 应用

    我有一个动态HTML5不包含任何外部资源的文档 文档内没有编码图像 CSS 和脚本 这个 HTML5 应用程序在互联网浏览器上运行良好 我想知道是否有可能convert this HTML5 应用程序转换成独立的 Android 应用程序
  • 使用 CSS 和 JQuery 创建组织结构图结构

    I was checking on stack forum Trees in Twitter Bootstrap https stackoverflow com questions 11167628 trees in twitter boo
  • D3.以编程方式缩放后使用鼠标滚轮时缩放会跳转

    当我通过单击鼠标缩放到特定位置然后尝试平移或使用鼠标滚轮时 缩放行为会跳跃 看来我的缩放级别正在恢复 就像单击鼠标之前一样 这是我的事件处理程序 function click d var x y k if d centered d var
  • 显示地址栏时的 100vh 高度 - Chrome Mobile

    I came across this problem a few times and was wondering if there was a solution to this problem My problem occurs on th
  • 更改导航栏悬停时 div 的背景图像

    我正在开发一个项目 我对 Javascript 很陌生 所以我想知道是否有 Jquery 代码或只是一个关于如何使背景图像在导航菜单悬停时更改的过程 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上会将
  • 使用 Angular 2 Forms 根据需要动态标记字段的正确方法是什么?

    使用 Angular 2 2 0 0 推荐的方法是什么动态地根据需要标记字段 使用角形式 https angular io docs ts latest guide forms html 在他们的所有示例中 只需添加必需的属性 如下所示
  • PHP:分离业务逻辑和表示逻辑,值得吗? [复制]

    这个问题在这里已经有答案了 可能的重复 为什么要在 PHP 中使用模板系统 https stackoverflow com questions 436014 why should i use templating system in php
  • 动画持续时间不准确

    我在 SVG 中创建了加载微调器 但动画持续时间不准确 例如 30 秒动画持续时间 实际 26 秒 动画持续时间 45 秒 实际持续时间 38 秒 60 秒动画持续时间 实际 51 秒 我很绝望 不知道哪里可能出错 你能帮助我吗 1 旋转器
  • AngularJS:ng-占位符不起作用

    我有以下输入 html 元素 我想根据用户模型中保存的内容更改占位符

随机推荐

  • 如何使用php将数据插入tally?

    我已经使用此代码从 tally erp 9 0 获取数据
  • Web 应用程序中的静态变量

    我可以在 Web 应用程序中使用静态变量吗 static 的替代品是什么 当我在页面中使用静态变量并且多个用户使用该应用程序时 它会产生冲突数据 不正确的数据 使用静态成员有哪些限制 静态成员在内存中共享吗 考虑将共享变量存储在 HttpA
  • 如何将 font Awesome 合并到 dart 组件中?

    以下 html 在文本左侧显示了一个漂亮的相机图标 当尝试设计聚合物组件的样式时 这是如何实现的 p i class fa fa camera retro fa lg i Cool camera p 具体来说 链接应该包含在哪里 ap
  • 在 Rails 开发中加载类后代

    当我在本地进入 Rails 控制台时 我需要能够从控制器看到所有类后代 我有这个Api BaseController我所有的 Api 控制器都继承自它 我遇到的问题是 当我跳到 Rails 控制台检查后代中的 Api 控制器时 它会显示为空
  • 无法从 Ldapmain 对您进行身份验证,因为“user.name 的凭据无效”

    I use debian 9 gitlab ce 11 10 4 ce 0 通过 apt 进行综合安装 openldap 2 4 44 ldap配置 已配置 etc ldap ldap conf BASE dc serverX dc lan
  • Paramiko / scp - 检查远程主机上是否存在文件

    我正在使用 Python Paramiko 和 scp 在远程计算机上执行一些操作 我使用的一些机器要求文件在其系统上本地可用 在这种情况下 我使用 Paramiko 和 scp 来复制文件 例如 from paramiko import
  • .NET 文件系统包装库[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 由于某种原因我找不到一个 但肯定有人已经创建了一个 NET IO 库包装器 我希望能够模拟对 File Exists 等的调用 而内置的静态方法对此
  • 绑定到 DataTable 的滚动事件

    我需要绑定到设置为垂直滚动的 DataTable 的滚动事件 很明显 简单的事件绑定是行不通的 table tbody on scroll function alert 我创建了一个demo here 有谁知道可以执行此操作的 API 方法
  • .NET 中每个文件规则一个类? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我遵循这条规则 但我的一些同事不同意它 并认为如果一个类较小 它可以与其他类留在同一个文件中 我经常听到的另一个论点是 连微软都不这样做 那我们为什么要这样做呢 对此 普遍的共识是什么 在
  • 模板概念进入了 c++14 吗?

    概念是一个很好的功能 例如 当模板实例化出现问题时 它可以用可读的消息替换丑陋的编译器错误输出 不幸的是他们没有得到to C 11 有人知道它是否进入了 C 14 吗 No but 对 Bjarne Stroustrup 的采访表示它们将被
  • 如何将 FOS\RestBundle 的默认格式指定为 json?

    我对应的配置是 fos rest view view response listener force sensio framework extra view annotations false 将路线指定为确实很烦人 Route jobs
  • Python 过滤器/最大组合 - 检查空迭代器

    使用Python 3 1 我知道这个问题已经被问过很多次 用于测试迭代器是否为空的一般问题 显然 对此没有简洁的解决方案 我猜是有原因的 迭代器在被要求返回下一个值之前并不真正知道它是否为空 不过 我有一个具体的例子 希望我能从中编写出干净
  • 如何将字符串转换为 IP 地址,反之亦然

    如何转换字符串 ipAddress struct in addr 反之亦然 如何提交未签名的长 ip 地址 谢谢 Use inet ntop and inet pton 如果你需要其他方式 不使用inet ntoa inet aton 类似
  • Java 6 启动画面

    我一直无法让 Java 6 启动屏幕正常工作 我已经尝试了我能想到的一切 我的manifest mf包含 Manifest Version 1 0 X COMMENT Main Class will be added automatical
  • 推断 CRTP 中模板化成员函数的返回类型

    是否可以推断 CRTP 基类中模板化成员函数的返回类型 虽然推断参数类型效果很好 但返回类型却失败了 考虑下面的例子 include
  • M1(Apple Silicon)上的 CocoaPods 失败,架构错误

    由于 ffi 问题 在 M1 MacBook 上运行 pod install 失败 如上所述here 我遵循了一些解决方法 我想我以不同的顺序尝试了所有这些方法 但现在我得到了一个略有不同的错误 LoadError dlopen opt h
  • 将 java.util.Calendar ISO 8601 格式转换为 java.sql.Timestamp

    我有一个 ISO 8601 日期格式的日期2015 09 08T01 55 28Z 我使用此代码将 ISO 8601 命运转换为 Calendar 对象 Calendar cal javax xml bind DatatypeConvert
  • 如何在SQL表中插入默认值?

    我有一个这样的表 create table1 field1 int field2 int default 5557 field3 int default 1337 field4 int default 1337 我想插入具有 field2
  • 将浮点数转换为字符串的最快 C++ 方法

    我遇到了将浮点数转换为字符串的问题to string对我来说太慢了 因为我的数据可能涉及几百万个浮点数 我已经有了解决方案如何快速写出这些数据 然而 在解决这个问题之后 我很快意识到浮点到字符串的转换正在留下很大的影响 那么 除了使用其他非
  • SVG 中的 HTML

    我想在一个文件中添加一些 HTML 标记SVG绘画 据我所知 这是不可能的SVG 图像显示在浏览器中 有没有办法画HTML上面的SVG 因为我想使用CSS table特点HTML the SVG