问题标签 [foreignobject]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
105 浏览

reactjs - foreignObject 在 SVG 边框外渲染文本

这是我的完整案例,我需要在中间绘制带有文本的六边形。这在 Chrome Mac 上工作得很好,但在 safari 上,它呈现在边界之外

代码沙盒

它如何在 Chrome Mac 上呈现 在此处输入图像描述

它如何在 Safari Mac 上呈现 在此处输入图像描述

0 投票
0 回答
212 浏览

javascript - D3.js v3 foreignObject Html 按钮在 2 年后无法使用我的代码没有更新

在 2017 年,我的代码运行良好,您可以看到页面上出现按钮。

2017年截图:

截屏

但到现在为止,我不知道它们为什么会消失,如下图所示。

2019年截图:

截屏

我想这可能是我使用的按钮方法,因为按钮需要在地图和图表的 SVG 内,这是我发现在 2017 年唯一有效的方法。以下是两个按钮的代码。

0 投票
1 回答
453 浏览

javascript - 将 HTML 附加到 d3 中的现有工具提示

我正在尝试修改zalando 技术雷达中的工具提示。

相关代码为:

为了扩展工具提示,我尝试根据此处描述的解决方案执行以下操作。

我修改后的代码:

有人可以给我一个提示如何显示这个额外的文字吗?

更新

完整代码https://github.com/zalando/tech-radar

0 投票
0 回答
55 浏览

reactjs - 单击处理程序未在 Firefox 中的 foreignObject 外部触发

我正在使用 patternfly-react v3 的 DropDownButton 和 MenuItem 元素。DropdownButton 翻译成和 menuItem 翻译成

  • . 这是为了创建一个下拉菜单,在单击按钮时打开。我也有 onClick 处理程序
  • 我已将这些元素作为异物嵌入到 svg 中。当下拉菜单打开时,它会溢出外来对象并且是可见的。现在的问题是当我点击
  • 溢出foreignObject 如果我使用firefox,则单击处理程序处理程序不会被触发。它在 safari 和 chrome 中运行良好。这是 foreignObject 中的预期行为还是我遗漏了一些东西。

  • 0 投票
    0 回答
    391 浏览

    typescript - 如何在 stenciljs 中设置 foreignObject 的宽度和高度?

    我正在尝试创建一个使用 SVG 并包含一些 HTML 的 StencilJS 组件,但每当我加载组件时,我都会收到错误消息:'TypeError: setting getter-only property "height"'。

    我已经单独测试了 HTML 并且它显示正确,我将 foreignObject 的宽度和高度设置为 100% 以填充 svg,但在 StencilJS 组件中设置它会导致错误。我还检查了mdn并且属性似乎不是只读的。

    这是我正在使用的代码:

    它只是从 stencilJS init cli 生成的基本组件

    0 投票
    2 回答
    1582 浏览

    svg - SVG 异物内的文本不可见

    我用一个包含 html 的外来对象创建了 SVG。

    但是html是不可见的。

    可能是什么原因?

    我采用了以下来源:https ://wiki.selfhtml.org/wiki/SVG/Elemente/eingebundene_Inhalte/foreignObject使用了“requiredExtensions”。

    0 投票
    0 回答
    64 浏览

    javascript - 为什么html元素在嵌入SVG的外物时会改变大小和位置?

    在此处输入图像描述我想将 Amchart3/Webix 图表嵌入到 SVG 元素中。首先我在 SVG 文档中创建了外来对象,然后设置了它的位置和大小。然后将 Webix 图表(类似于 div 和 canvas 的 html 元素)附加到外部对象中。它显示出来了,但是图表的大小变大了。我试过amchart3,它的显示也比平时大。问题是什么?

    0 投票
    1 回答
    152 浏览

    css - SVG foreignObject 图像在 Safari 上不起作用

    我正在使用 svg:foreignObject 在悬停时创建格式化图像。以下策略在 Chrome 中完美运行,但foreignObject 在 Safari 中不可见。我就是看不到!我错过了什么?

    代码如下 -

    任何建议都非常感谢。

    0 投票
    1 回答
    30 浏览

    svg - 在 SVG `path` 元素上创建重叠 div

    我正在尝试创建高度和宽度为path元素的 div,它与path. 为此,我正在创建带有 div 的 foreignObject 。我正在使用getBoundingClientRect(). 但是,在将高度宽度应用于异物后,它的大小与 of 的大小不同path element(实际上它比它大得多),并且 x、y 坐标也没有正确设置。

    我怎样才能div在路径元素上方创建svg高度、宽度、x 和 y 相似的元素,path以便在path元素上重叠?这好像是foreignObject接受heightwidth其他单位。

    在此处输入图像描述

    在上面的屏幕截图中,heightandwidthforeignObject设置为一些东西511px,但是,在检查了它作为的元素之后14745。我真的不明白它是如何采用不同的高度和宽度的?

    0 投票
    0 回答
    44 浏览

    html - SVGForeignObjectElement API(IE 支持)和 SVGForeignObject(IE 不支持)有什么区别?

    我想将 aforeignObject用于项目。

    我无法在 IE 中测试。

    https://caniuse.com/#search=foreignobject上,我看到 IE 支持 SVGForeignObjectElement API,但 IE 不支持 SVGForeignObject。

    但是在https://developer.mozilla.org/en-US/docs/Web/API/SVGForeignObjectElement我读到它只是一个用于读取 SVGForeignObject 属性的元素。

    所以我很困惑:两者之间有什么区别?

    我可以在 IE 中使用 SVGForeignObject 吗?

    如果没有,是否有任何 polyfill,或者我应该在我的应用程序中包含 IE 的后备?