Javascript svg外部对象中的画布不应用转换

我在svg中使用画布时遇到了一个问题，即使用foreignObject

问题是画布插入到一个组中，该组具有变换平移、旋转或缩放，但画布没有使用变换打印

我用的是Chrome

您可以在这里看到我的示例：

评论有很好的转换，但画布没有。 但是，如果您使用开发工具并检查元素画布，您将看到他在进行转换时处于有利位置

希望你能帮助我

---

谢谢

我想你既不旋转也不变换画布。如果你想旋转/变换它，你可以使用CSS样式。请参阅下面的代码

.transform {
    -ms-transform:translateX(200px) rotate(40deg) translateY(130px); /* IE 9 */
    -webkit-transform:translateX(200px) rotate(40deg) translateY(130px); /* Chrome, Safari, Opera */
    transform:translateX(200px) rotate(40deg) translateY(130px);
    background:#FF0000;
}

这个css代码可以在大多数浏览器上使用。您可以在示例中使用这个类，如下所示

<canvas id="canvas" width="400px" height="300px"  class="transform"></canvas>

---

您可以在我的更新示例中看到。Canvas和SVG是不同的库，不能一起使用。你可以把一个转换成另一个来做你需要的事情。请参阅下面的链接，它可能会对您有所帮助，您也可以像下面的示例那样进行示例

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform='translate(250,10)rotate(40)'>
 <rect x="10" y="20" height="50" width="75"
      style="stroke: #ffff00; fill: #ff0000"/>
    <text x="10" y="90" style="stroke: #660000; fill: #ff0000">
    Comment</text>
</g>

---

据我所知，这实际上是chrome中的一个bug，自2015年以来就有人提到要修复它

不过，我也需要一个解决方案，下面是我总结的内容；我使用了image元素，它在svg中的功能与隐藏画布结合在一起。系统将所有喜欢的内容都绘制到画布上，然后将画布数据传输到图像元素

imageElement.setAttribute('href',hiddenCanvas.toDataURL("image/png"));

这是一个额外的步骤，但它产生的结果基本相同。在我的项目中，我将所有这些捆绑到一个JS元素生成器中

this.canvas = function(id=null, x=0, y=0, width=0, height=0, angle=0, res=1){
    var canvas = document.createElement('canvas');
        canvas.setAttribute('height',res*height);
        canvas.setAttribute('width',res*width);

    var image = document.createElementNS('http://www.w3.org/2000/svg','image');
        image.id = id;
        image.style = 'transform: translate('+x+'px,'+y+'px) scale('+1/res+') rotate('+angle+'rad)';
        image.setAttribute('height',height*res);
        image.setAttribute('width',width*res);

    return {
        element:image,
        canvas:canvas,
        context:canvas.getContext("2d"),
        c:function(a){return a*res;},
        print:function(){
            this.element.setAttribute('href',this.canvas.toDataURL("image/png"));
        }
    };
};

有点笨重，但我想这正是你需要的。它还使用'res'参数和'c'函数处理分辨率，您可以将其与任何画布绘图函数一起使用

canvas.context.fillRect(canvas.c(0), canvas.c(0), canvas.c(width), canvas.c(height));

---

我把画布放在有变换的组中，并希望它像组中的其他对象一样跟随。当您打开dev工具并检查canvas元素时，您可以看到canvas不是工具显示的地方。这些工具显示，它被转换并像它应该的那样旋转。它是一组对象中的一员，必须应用一些转换，这就是为什么我宁愿避免只使用css。很抱歉，我纠正了它，可能是一个Chrome错误，为什么不向他们的bugtracker报告呢？问题：为什么在SVG中使用画布元素？这看起来像是HTML5页面中使用的SVG，所以这里应该做几件事：1 SVG是HTML5的一部分，因此没有XML名称空间。2所有其他元素都是相同的：没有名称空间。3为什么不将画布放在页面本身而不是SVG内部？你在这里具体想做什么，因为这只是一个网页，看起来你在用SVG做CSS已经可以做的事情。@Mike'Pomax'Kamerman只有SVGRoot节点在html命名空间中，它的所有子节点都在SVG one中。包含在不属于svg名称空间的foreignObject中的元素需要声明自己的名称空间，至少在所有第一个父节点上。但是svg根的xmlns声明有输入错误，这会导致chrome的错误行为吗？我会对此感到惊讶，但如果设置了，OP应该正确设置。不，你没有抓住重点。SVG是HTML5，HTML5中没有名称空间，元素是一级公民，如或，不需要名称空间，您只需像任何其他HTML元素一样使用它。这也意味着您不会因为这样的事情而逃避SVG名称空间。这些都是HTML元素。谢谢你的链接，也许会有帮助。但在正常情况下，我们可以在svg中使用画布和外部对象。但是如何处理我提到的这个bug呢？

canvas.context.fillRect(canvas.c(0), canvas.c(0), canvas.c(width), canvas.c(height));