d3.js SVG foreignObject内容不显示，除非是纯文本

kcrjzv8t  于 2023-10-19  发布在  其他
关注(0)|答案(6)|浏览(369)

我试图在SVG绘图中使用foreignObject标记输出HTML。我使用d3来生成元素。只有当foreignObject标签中的内容是纯文本时，才会显示foreignObject标签中的HTML内容，否则它只显示为空/空白。请看这个jsfiddle，看看我的问题的一个例子：http://jsfiddle.net/R9e3Y/29/
foreignObject标记中的内容在检查元素this this时显示：

  1. <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  2.     <foreignObject x="40" y="40" width="100" height="100">
  3.         <div>test</div>
  4.     </foreignObject>
  5. </svg>

但在屏幕上看不到的东西吗如何让内容显示出来？

d3.js

6条答案

按热度按时间
uinbv5nw

uinbv5nw1#

请确保设置了width和height参数。
添加xmlns并没有为我解决问题。结果对我来说问题更简单...我没有添加width和height参数，所以foreignObject内部的内容没有显示，即使它在那里。这两个参数似乎默认为0。

赞(0）分享  回复(0）举报  2023-10-19
7gs2gvoe

7gs2gvoe2#

除了@robert-longson的回答：
如果你使用d3selection.join()，它看起来像这样：

  1. myForeignObject.selectAll('div').data(myData).join('xhtml:div')

请注意，xhtml命名空间仅在join()中指定，而在selectAll()中没有指定。

赞(0）分享  回复(0）举报  2023-10-19
l2osamch

l2osamch3#

我为此开发了一些东西。代码在下面。更高级的版本使用代理来拉入外部非CORS资源。svg foreignObject阻止加载任何非CORS跨域请求。我写了一个简单的代理在Runkit上运行。看下面。
其局限性是：没有外部非CORS字体，没有非CORS图像。任何想要帮助改进这一点的人，包括添加对图像和字体的支持，都可以在这里做出贡献：https://github.com/dosyago-coder-0/dompeg.js/blob/master/dompeg.js

  • 网页脚本：*
  1. (async function (){ 
  2.   const width = document.scrollingElement.scrollWidth;
  3.   const height = document.scrollingElement.scrollHeight;
  4.   const doc = document.implementation.createHTMLDocument('');
  5.   doc.write(document.documentElement.outerHTML);
  6.   doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
  8.   const styles = [];
  9.   for( let i = 0; i < document.styleSheets.length; i++ ) {
  10.     const ss = document.styleSheets[i];
  11.     if ( ss.cssRules ) {
  12.       for( let j = 0; j < ss.cssRules.length; j++ ) {
  13.          styles.push( ss.cssRules[j].cssText );
  14.       }
  15.     } else {
  16.       try {
  17.         const res = await fetch(ss.href);
  18.         const cssText = await res.text();
  19.         styles.push(cssText);
  20.       } catch(e) {
  21.           /** fetch to proxy here as fallback
  22.            * uncomment if you set up your proxy server 
  23.         try {
  24.           const res = await fetch(`https://${YOUR PROXY SERVER}.runkit.sh/?url=${btoa(ss.href)}`);
  25.           const cssText = await res.text();
  26.           styles.push(cssText);
  27.         } catch(e) { **/
  28.           console.warn(`Exception adding styles from ${ss.href}`, e, e.stack);
  29.         /** uncomment if you setup proxy  
  30.         }  
  31.         **/
  32.       }
  33.     }
  34.   }
  36.   Array.from( doc.querySelectorAll('noscript, link, script')).forEach( el => el.remove() );
  37.   stripComments(doc);
  38.   Array.from( doc.querySelectorAll('*[style]')).forEach( el => {
  39.     const styleText = el.getAttribute('style');
  40.     const uniq = (Math.random()+''+performance.now()).replace(/\./g,'x');
  41.     const className = `class${uniq}`;
  42.     const cssText = `.${className} {${ styleText }}`;
  43.     styles.push( cssText );
  44.     el.classList.add( className );
  45.   });
  47.   const styleElement = doc.createElement('style');
  48.   styleElement.innerText = styles.join('\n');
  49.   doc.documentElement.appendChild(styleElement);
  51.   const canvas = document.createElement('canvas');
  52.   Object.assign( canvas, {width,height});
  53.   const ctx = canvas.getContext('2d');
  55.   const data = `
  56.   <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
  57.     <foreignObject width="100%" height="100%">
  58.      ${(new XMLSerializer).serializeToString(doc).slice(15)}
  59.     </foreignObject>
  60.   </svg>`;
  61.   const DOMURL = window.URL || window.webkitURL || window;
  63.   const img = new Image();
  64.   const svg = new Blob([data], {type: 'image/svg+xml'});
  66.   Object.assign( img, {width,height});  
  67.   img.crossOrigin = "Anonymous";
  68.   img.onload = function() {
  69.     ctx.fillStyle = 'white';
  70.     ctx.fillRect( 0, 0, canvas.width, canvas.height );
  71.     ctx.drawImage(img, 0, 0);
  72.     const datauri = canvas.toDataURL('image/jpeg');
  73.     const anchor = document.createElement('a');
  74.     anchor.download = 'screen.jpg';
  75.     anchor.href = datauri;
  76.     anchor.target = "_new";
  77.     anchor.innerText = 'download screen.jpg';
  78.     anchor.addEventListener('click', e => {e.stopPropagation();anchor.remove();}, { capture: true });
  79.     document.body.appendChild(anchor);
  80.     Object.assign( anchor.style, {
  81.       position: 'fixed',
  82.       background:'white',
  83.       fontSize: '18px',
  84.       fontFamily: 'monospace',
  85.       color: 'blue',
  86.       top: 0,
  87.       left: 0,
  88.       zIndex: Number.MAX_SAFE_INTEGER
  89.     });
  90.   }
  91.   img.src = buildSvgImageUrl(data);  
  92.   img.style.position = "absolute";
  93.   img.style.zIndex = "10000000";
  94.   img.style.backgroundColor = "white";
  95.   //document.body.appendChild(img);
  97.   function buildSvgImageUrl(svg) {
  98.     const b64 = btoa(unescape(encodeURIComponent(svg)));
  99.     return "data:image/svg+xml;base64," + b64;
  100.   }
  102.   function stripComments(docNode){
  103.     const commentWalker = docNode.evaluate('//comment()', docNode, null, XPathResult.ANY_TYPE, null);
  104.     let comment = commentWalker.iterateNext();
  105.     const cuts = [];
  107.     while (comment) {
  108.       cuts.push(comment);
  109.       comment = commentWalker.iterateNext();
  110.     }
  111.     cuts.forEach( node => node.remove());
  112.   }
  113. }());
  • runkit代理服务器脚本：*
  1. const request = require("request");
  2. const rp = require('request-promise');
  3. const {URL} = require('url');
  4. const express = require("@runkit/runkit/express-endpoint/1.0.0");
  5. const b64 = require('base-64');
  6. const bodyParser = require('body-parser');
  7. const page = (url,err) => `
  8.         <form method=POST style="
  9.             position: fixed;
  10.             position: sticky;
  11.             display: table;
  12.             top: 0px;
  13.             z-index:12000000;
  14.             background: white;">
  15.             <label for=hider99>X</label><input id=hider99 type=checkbox>
  16.             <style>
  17.                 #hider99:checked ~ fieldset {
  18.                     display: none;
  19.                 }
  20.             </style>
  21.             <fieldset><legend>Proxy</legend>
  22.             <p>
  23.                 <input required type=url size=62 name=url placeholder="any url" value="${url||'https://google.com/favicon.ico'}">
  24.                 <button style=background:lime>Load</button>
  25.                 ${ !! err ? `<p><span style=color:red>${err}</span>` : '' }           
  26.             </fieldset>
  27.         </form>`;
  28. const app = express(module.exports);
  29. app.use(bodyParser.urlencoded({ extended: false }));
  31. app.get("/", async (req,res,next) => {
  32.     console.log(req.query.url);
  33.     let url;
  34.     res.type('html');
  35.     res.set('access-control-allow-origin', '*');
  36.     try {
  37.         url = b64.decode(req.query.url);
  38.         new URL(url);
  39.         } catch(e) { res.end(page('',"not a url"+e)); return; }
  40.     try {
  41.         res.type(type(url));
  42.         const data = await rp(url);
  43.         res.end(data);
  44.         } catch(e) { res.end(page('',""+e)); }
  45. });
  47. app.get("/:anything", async (req,res,next) => {
  48.     res.type('html');
  49.     res.end('404 Not found');
  50. });
  52. function type(s = '') {
  53.     return s.split(/\./g).pop() || 'html';
  54. }
  55. void 0;
展开查看全部
赞(0）分享  回复(0）举报  2023-10-19
jjjwad0x

jjjwad0x4#

  1. var a = function(a) {
  2.             var b = enter code heredocument.createElementNS("http://www.w3.org/1999/xhtml", "div");
  3.             b.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + a + "</svg>";
  4.             for (var c = document.createDocumentFragment(); b.firstChild.firstChild; ){
  5.                 c.appendChild(b.firstChild.firstChild);
  6.             } 
  7.             return c;
  8.         }
  10.         $('#app_canvasContainer svg').append(a('<foreignObject overflow="visible" width="200" height="100" x="'+ x +'"  y="'+ y +'" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><textarea class="text-entity" readonly="true" resizeable=false xmlns="http://www.w3.org/1999/xhtml" >'+ val +'</textarea>`enter code here`</foreignObject>'));
赞(0）分享  回复(0）举报  2023-10-19
h9vpoimq

h9vpoimq5#

因为你使用的是d3，你需要告诉d3这个div是一个html div，而不是svg命名空间中的某个元素。尝试

  1. .append("xhtml:div")
赞(0）分享  回复(0）举报  2023-10-19
xfyts7mz

xfyts7mz6#

<foreignObject>允许嵌入各种标记，而不仅仅是HTML。这意味着，必须有一种方法来确定使用什么语言。这就是名称空间发挥作用的地方。
要告诉SVG您拥有哪种foreignObject，您必须将内容放在适当的名称空间中。

  1. <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  2.   <foreignObject x="40" y="40" width="100" height="100">
  3.     <div xmlns="http://www.w3.org/1999/xhtml">test</div>
  4.   </foreignObject>
  5. </svg>

在您的示例中，<div>元素位于SVG名称空间中，即它是一个SVG元素，而不是HTML元素（尽管是非标准元素）。
<foreignObject>元素也有一个requiredExtensions属性来告诉浏览器使用哪个扩展，但是不同的浏览器似乎对这个属性的解释不同，所以最好不要设置它。

赞(0）分享  回复(0）举报  2023-10-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com