使用 foreignObject 通过 Canvas API 进行 SVG 转换无法正常工作

问题描述 投票：0回答：0

我也想在 Apple 设备上发布我的应用程序，除了 Android 之外。不幸的是，我有一个我无法解决的“移植”问题。我的应用程序在 Android 上运行良好。

问题是我有一个需要转换为图像的 SVG。 SVG 的起点是具有多个节点的思维导图。每个节点都是这个 SVG 中的一个，包含各种数据。除此之外，这还可以包含一个小的 base64 编码图像。 SVG 在浏览器中完全正确显示。为了导出思维导图，我必须将其转换为图像。对于转换，我使用 Canvas API。这在 Android 上效果很好，但在 Mac 和 Iphone 上它总是导出没有图像的思维导图。我已经尝试了所有可能的方法。但不能再进一步了。

谁在渲染图形？ Safari 上的 Canvas API 是否有可能是不同的版本，可能无法执行 Chrome 支持的操作？会不会是base64编码有问题？因为否则它会显示所有内容，但图像丢失了。

有没有人有想法可以帮助我？它真的只挂在一件事上，我不明白。 :(

或者有什么好的 Canvas API 替代品吗？我在这里可以取得更好的成绩？

非常感谢

这是一个有两个节点的简单示例。根和 N1.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" viewBox="263 376 444 166">
    <defs xmlns="http://www.w3.org/1999/xhtml">
        <style type="text/css">@font-face { font-family: FontAwesome; src: url("http://localhost:3333/fontawesome-webfont.eot?#iefix&amp;v=4.7.0") format("embedded-opentype"), url("http://localhost:3333/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("http://localhost:3333/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("http://localhost:3333/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("http://localhost:3333/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; }.mmp-container_node:not(.hidden) { cursor: pointer; }.mmp-container_branch { stroke-width: 2px; stroke: rgba(0, 0, 0, 0.1); }.node-container { display: table; box-sizing: border-box; padding: 3px; border-radius: 8px; color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.06); }.node-container.root { padding: 8px; }.node-container.root:not(.selected) { background-color: rgba(0, 0, 0, 0.1); }.node-container.root .node-box { border-color: rgba(0, 0, 0, 0.4); }.node-container .node-box-container { display: block; background-color: rgb(255, 255, 255); max-width: 200px; width: max-content; }.node-container .node-box { display: grid; grid-template-columns: 50px 1fr 5px auto; grid-template-rows: auto auto; overflow: hidden; padding: 2px; border: 3px solid rgba(0, 0, 0, 0.2); background-color: rgb(255, 255, 255); }.node-container .node-box.image .node-text, .node-container .node-box.icon .node-text { grid-column-start: 2; grid-column-end: span 2; }.node-container .node-box-container, .node-container .node-box { border-radius: 4px; }.node-container .node-text { grid-column-start: 1; grid-column-end: span 3; grid-row-start: 1; grid-row-end: span 2; overflow-wrap: break-word; align-self: center; display: block; max-width: 200px; font-size: 13px; padding: 4px 8px; }.node-container .node-image { align-self: center; grid-column-start: 1; grid-column-end: auto; grid-row-start: 1; grid-row-end: auto; width: 50px; height: 50px; border-radius: 2px; background-size: cover; background-position: center center; }@font-face { font-family: mdzRoboto; src: url("http://localhost:3333/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("http://localhost:3333/Roboto-Regular-webfont.woff") format("woff"), url("http://localhost:3333/Roboto-Regular-webfont.ttf") format("truetype"), url("http://localhost:3333/Roboto-Regular-webfont.svg#robotoregular") format("svg"); font-weight: 400; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("http://localhost:3333/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("http://localhost:3333/Roboto-Light-webfont.woff") format("woff"), url("http://localhost:3333/Roboto-Light-webfont.ttf") format("truetype"), url("http://localhost:3333/Roboto-Light-webfont.svg#robotolight") format("svg"); font-weight: 300; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("http://localhost:3333/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("http://localhost:3333/Roboto-Bold-webfont.woff") format("woff"), url("http://localhost:3333/Roboto-Bold-webfont.ttf") format("truetype"), url("http://localhost:3333/Roboto-Bold-webfont.svg#robotobold") format("svg"); font-weight: 700; font-style: normal; }* { font-family: Roboto, mdzRoboto, sans-serif; }</style>
    </defs>
    
    <g transform="translate(0,0)">
        <path class="mmp-container_branch mapVizContainer_branch p_root" id="d975782c-d5d9-26b7-d540-287ca3999278_branch" d="M353.5,459C455,459,455,459,588.5,459" style="fill: none;"/>
    
        <g class="mmp-container_node mapVizContainer_node right" id="root" transform="translate(353.5,459)">
            <foreignObject x="-40.5" y="-26" width="105" height="52" style="padding: 0px 12px;">
                <div xmlns="http://www.w3.org/1999/xhtml" class="node-container root">
                    <div class="node-box-container">
                        <div class="node-box">
                            <div class="node-text">Root
                            </div>
                        </div>
                    </div>
                </div>
            </foreignObject>
        </g>
    
    
        <g class="mmp-container_node mapVizContainer_node right" id="d975782c-d5d9-26b7-d540-287ca3999278" transform="translate(588.5,459)">
            <foreignObject x="-44.5" y="-33" width="113" height="66" style="padding: 0px 12px;">
                <div xmlns="http://www.w3.org/1999/xhtml" class="node-container">
                    <div class="node-box-container">
                        <div class="node-box image">
                            <div class="node-image" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFcCAYAAAA+mUwJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAABXAAAAAA3ORrXAAAOqklEQVR4Ae3VgQkAIRADQbX/nlWwCpd5vgAzF8jcY9zfR4AAAQIECPwssH5+vLcTIECAAAECT8CgawIBAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgcABP4AS2ajGNXwAAAABJRU5ErkJggg==&quot;);"></div>
                            <div class="node-text">N1</div>
                        </div>
                    </div>
                </div>          
            </foreignObject>
        </g>
    </g>

</svg>

ios svg canvas safari foreignobject
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.