HTML、画布和SVG之间是否有任何兼容性，或者它们是完全独立的？
我不应该问“什么是更好的”，但问题是：
我有用HTML画布编码的化学结构(MOLFILE)绘图。我有一个康威生命游戏编码使用画布。画布编码似乎简单且标准化，它附带了我在“生命游戏”案例中使用的一个很好的特性，这就是非常容易的画布媒体记录(画布记录代码只是几行代码)。
但我也使用一些D3的强制自然结构布局，在那里我没有绝对的定位，就像我对康威生活和MOLFILE的绘图。我需要将MOLFILE绘图与基于D3力的布局结合起来。另外，昨天我检查了是否可以使用画布记录器来记录从基于D3的布局中获得的动画SVG。我发现的唯一代码似乎是将SVG绘图复制到画布中，然后使用画布媒体记录功能。很奇怪。
我的问题是: SVG和画布不应该在某种程度上兼容吗？浏览器不是最终使用相同的底层2D图形引擎来支持SVG和画布吗？怎么能把两者混为一谈？D3有画布版本还是只适用于SVG？是否有一个基于画布的替代D3，特别是针对力导向布局？
这将帮助我决定什么是我应该保留的固定和什么我应该移动。我可以将MOLFILE绘图移植到SVG。或者我可以把基于力的布局材料移植到画布上。总得付出点什么。理想情况下，会有一些兼容性层，所以我不需要移植任何东西，可以一起使用它们。但是速度，效率是一个问题，因为我的图纸有成千上万的节点和弧线。
回答 1
Stack Overflow用户
发布于 2021-03-16 22:18:59
和画布不应该有某种程度的兼容吗？
是的也不是..。
SVG图像位于HTML页面(作为一种语言，它基于XML)和图像之间(最后，它的图形呈现才是最重要的)。
作为一个图形引擎，它确实与canvas共享了一些概念，并且至少在canvas端完成了一些工作，从而确实提出了更统一的API。例如，Path2D接口确实接受一个SVGPath声明字符串作为输入，还有一些关于公开基于SVGFilters等的新CanvasFilter接口的讨论。
所有可以在SVG上完成的工作也可以在画布上完成，但是对于大多数情况下，您必须自己编写呈现代码，而不是让浏览器来处理它。
浏览器最终不会为SVG和画布使用相同的底层2D图形引擎吗？
是的，最终都落在了相同的Skia / Cairo / WebRender / Direct2D画家身上，但HTML+CSS也是如此。所以这并不意味着什么。API仍然是非常不同的。
，这两者怎么能混在一起？D3有画布版本还是只适用于SVG？
尽管编写D3时考虑到了SVG，而且它的一些方法(如转换)在DOM节点中工作得最好，但它的许多工具实际上并不依赖于JavaScript以外的其他任何东西。
将一些数据传递给它，它会帮助转换它，生成坐标/颜色/任何东西。
因此，不存在D3的画布版本，但是您可以使用D3来帮助您在画布上绘图，在web上有很多文章解释如何在画布上使用D3来完成各种事情，因为是的，所有的事情都不是简单的。
对于力定向图来说，它不应该太难。
关于为什么不能像使用画布那样使用MediaRecorder记录SVG，除其他外，SVG确实公开了比画布敏感得多的信息。
例如，您可以拥有一个svg，如：
If this rectangle is red it means you already visited <a href="https://stackoverflow.com/questions/66663899/is-there-any-compatibility-between-html-canvas-and-svg-or-are-they-completely-se">that link</a><br>
<svg width="50" height="50">
<style>
rect { fill: green; }
:visited rect { fill: red; }
</style>
<a href="https://stackoverflow.com/questions/66663899/is-there-any-compatibility-between-html-canvas-and-svg-or-are-they-completely-se"><rect width="30" height="30"/></a>
</svg>
当在画布上绘制它时，浏览器可以篡改所有的隐私漏洞，但这样做是以监视器的帧率来生成视频吗？很可能永远不会发生。
const svg_markup = new XMLSerializer().serializeToString( document.querySelector("svg") );
const svg_blob = new Blob([svg_markup], { type: "image/svg+xml" });
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = URL.createObjectURL(svg_blob);
img.onload = (evt) => {
ctx.drawImage(img, 0, 0 );
}If this rectangle is red it means you already visited <a href="https://stackoverflow.com/questions/66663899/is-there-any-compatibility-between-html-canvas-and-svg-or-are-they-completely-se">that link</a><br>
<svg width="50" height="50">
<style>
rect { fill: green; }
:visited rect { fill: red; }
</style>
<a href="https://stackoverflow.com/questions/66663899/is-there-any-compatibility-between-html-canvas-and-svg-or-are-they-completely-se"><rect width="30" height="30"/></a>
</svg><br>
When drawn on a canvas :visited and others are tampered.<br>
<canvas width="50" height="50"></canvas>
https://stackoverflow.com/questions/66663899
复制相似问题
腾讯云开发者
