个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
HTML5 通过 svg 元素支持 SVG。可以使用 foreignObject 元素将其他语言嵌入到 SVG 中。 HTML 可以这样呈现，MathML 也可以。现在的浏览器还能渲染什么？ (简单的例子表示赞赏)
foreignObject 元素中的 HTML(canvas 元素)示例:
<!DOCTYPE html>
<html>
<body>
<svg id="svg1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" width="200" height="100">
<canvas id="myCanvas" width="200" height="100"></canvas>
</foreignObject>
</svg>
<script>
var canvas1 = document.getElementById("myCanvas");
var context1 = canvas1.getContext("2d");
context1.fillStyle = "lightblue";
context1.fillRect(20, 40, 50, 50);
</script>
</body>
</html>
foreignObject 元素中的 MathML 示例(使用 FF5):
<!DOCTYPE html>
<html>
<body>
<svg id="svg1" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="50" y="50" width="100" height="100">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</foreignObject>
</svg>
</body>
</html>
最佳答案
从技术上讲，任何东西都可以进入foreignObject标签。问题是用户代理是否支持它。对于这一点，似乎没有确定的答案。 SVG spec本身对此(有意)含糊不清:
The 'foreignObject' element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
幸运的是，规范也defines requiredExtensions 接受以空格分隔的命名空间 URI 列表的属性。这与 switch 一起语句允许基于用户代理功能的半智能回退逻辑。 Example :
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<switch>
<!-- Render if extension is available -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/foreign-object-spec-uri">
<!-- Foreign object content -->
</foreignObject>
<!-- Else, do fallback logic -->
<text x="0" y="20">Not available</text>
</switch>
</svg>
实际呈现的内容似乎完全取决于用户代理(浏览器、Batik 等)。因此，类似地，HTML5 规范有一个 short blurb , 对 foreignObject 中发现的任何非 HTML 内容洗手
The SVG specification includes requirements regarding the handling of elements in the DOM that are not in the SVG namespace, that are in SVG fragments, and that are not included in a foreignObject element. This specification does not define any processing for elements in SVG fragments that are not in the HTML namespace; they are considered neither conforming nor non-conforming from the perspective of this specification.
原来的帖子指出“HTML 可以被呈现......就像 MathML 一样”。自 <math>元素现在是standard HTML5 ，我相信浏览器将该代码解释为 HTML。因此，从技术上讲，浏览器将 MathML 呈现为 HTML 的一部分在技术上更为正确。
根据我的经验，坚持使用 [X]HTML 将是最兼容的……并且可能是您真正需要的全部。您上面的示例都通过使用父 HTML namespace 来工作。如您所见，您可以从 SVG context 中插入 HTML 文档片段。或 HTML context , 所以它可以非常通用。
关于html - 当 SVG 嵌入 HTML5 时，可以在 foreignObject 元素中呈现什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6849192/
24
4
0
我有一个 aspx 应用程序。在每个 GET 中，服务器以包含除表格网格之外的所有内容的“基本”html 进行响应。 这个“网格信息”包含在页面中隐藏的输入类型(json 格式)中。 这是设计使然，无
阅读有关 iOS 中 UIViewControllers 更改的文档，我试图弄清楚呈现模态视图 Controller 之间的交互如何在自定义容器 View Controller 内工作。最终，我希望能
我正忙于编写自己的 JSF2 UIComponent 及其相关的渲染器。我所有的 UIComponent 都实现了 ClientBehaviorHolder。我不明白的是如何真正呈现 ClientBe
我正在开发一个使用UIPopoverController的应用程序，我在呈现该弹出窗口时遇到问题，我有一个添加在self.view上的UIView，并在该 View 上添加了一个表格 View ，该表
我有一个简单的应用程序，我想在用户首次登录应用程序时在其中显示一个 PageViewController。他们查看教程后，在下一次加载时不会显示 PageViewController。 但是我收到了以
我正在尝试制作一个小型的backbone.js 应用程序，但在事情的顺序上很挣扎。 在我的 html 文件中，标题中有两个脚本 block : jQuery(function(){
我有一个以模型为来源的表格: $form->setModel("test"); 在模型中，我们可以定义字段类型，例如:boolean 将在表单中制作复选框。 现在我们如何定义呈现为单选按钮的类型？ 最
fabricJS 版本 2.2.3 测试 jsFiddle 我正在尝试使用 LabeledRect 子类，但我的问题是，每当我尝试从 JSON 加载它时，它都不会呈现，并且在控制台中也没有出现错误。请
在我的 Xaml 中，我定义了一个资源作为 vehicleDataInput，它提供一些文本框供用户输入数据。如果我没有为它定义一个 x:Key ，它将在我的应用程序中出现并按其应有的方式工作。问题是
我在 React 中创建了一个 Symbol 组件来轻松呈现 HTML Symbols像 euro 这样的名字将呈现 €(€) 或 sum 呈现 ∑(∑). 问题是，如果我只渲染 HTML 代码，我将
我尝试渲染一个 View ，该 View 工作正常，但似乎无法获得传递给它的模型对象。我不知道原因，因为根据所有手册和示例，这应该非常简单。 模型对象 class Race { def dis
我正在尝试为Grails项目添加一个简单功能，类似于youtube，它将允许用户喜欢/不喜欢文章。有一个非常原始的页面来显示带有喜欢的文章和一个使“喜欢”成为可能的 Controller 。 las，
我的应用程序中的第一个 ViewController 子类 UIImagePickerController 然后通过 didFinishPickingMediaWithInfo 回调，我执行以下操作:
我正在做一个简单的 redux/react todo 应用程序。我无法显示待办事项。我能够 console.log 数据，但无法显示它。我做错了什么？ 我把文件分开了，这是我的app.js: impo
我正在尝试呈现一个导航 Controller ，它似乎可以工作并呈现导航 Controller 。但是，即使它有效，我仍然不断收到错误？ 我的代码 let vc = storyboard.instan
我正在重新创建一个简单版本的 snapchat 应用程序，但遇到了一个恼人的小问题，我似乎无法找到解决办法。 我查看了一些答案，例如 this one但没有运气。 总体概念与 snapchat 用户单
我在呈现警报时遇到问题。我正在使用 UIAlertController。当用户按下提交按钮时，在应用程序执行某些操作时，需要立即显示“请稍候..”的警报。操作完成后，警报将消失。尽管应该在我开始执行操
我只是想用 Kinetic 渲染图像，但没有出现，也没有出现错误。 可以找到 fiddle here . 源代码: $( function() { var stage = new Kineti
我正在使用 Phantomjs 检查我的应用程序。我正在查看的页面包含很多组件，并且由 Angularjs 提供支持。我的测试服务器很慢。在 onLoadFinished 事件中，我使用渲染对网页进行
我有一个变量，它的字符串包含我所有的文档，如下所示: var string = " ReportHelloWorld"; 我想打开一个正确插入和显示此报告的新页面，但不知道如何操作。我该怎么办？ 感谢
我是一名优秀的程序员,十分优秀！