问题标签 [foreignobject]

我在我的应用程序（redmine、pfsense、ESXi 等）上使用 AD LDAP 身份验证

我最近成功地在我的域 PARIS.france 和外国域 BERLIN.germany 之间建立了双向信任关系。域信任关系看起来没问题，DNS也是，我可以毫无问题地浏览每个域。

下一步是允许来自该域的用户在我的应用程序上进行身份验证。所以我确实在我的 AD PARIS.france 中创建了一个域本地组“应用程序访问”，其中包含用户 PARIS\Pierre 和 BERLIN\Otto

但是当我尝试登录 Web 应用程序时，只有 Pierre 可以工作。Otto 无法进行身份验证。

当我进一步看时，我在我的组中看到 Pierre 有一个 SamAccountName，但 Otto 是一种特殊类型的对象（“这个对象只是来自受信任的外部域的用户或组的占位符”）并且没有这样的一个属性。我猜为什么它不起作用？我可以在 ForeignSecurityPrincipal 组中看到该帐户。

我想要实现的目标是可能的吗？是否需要在应用程序中配置特殊的 ldap 查询？

我正在为 Autodesk Forge Viewer（Markupscore 扩展）创建一个自定义测量工具。我已经<path>相当容易地用 SVG 标签实现了画线部分。但是，一旦调用事件（一旦用户完成画线），我想<textarea>为用户呈现一个输入数值。onMouseUp为此，我使用foreignObject, 输入文本区域和显示文本的文本标签。出于某种原因，我在此文本区域中输入的字符是“颠倒的”。textarea 本身不是；书写方向仍然是左→右。只是个别角色颠倒了。它看起来像这样：

生成的标记看起来像这样：

知道发生了什么吗？我尝试过重置浏览器样式，我尝试过调整rotate属性，我尝试过向 SVG 添加命名空间属性，但这些属性都不会对文本方向产生任何影响。我对使用 SVG 完全陌生foreignObjects，如果我不清楚并且没有提供足够的信息，我很抱歉。

的foreignObject子 div 元素侦听指针事件，但是，它们不会在呈现它的 React 类组件中被接收。有任何想法吗？

我正在尝试在 JointJS 中定义一个包含标签的自定义形状。如果我将标记定义为字符串，它就可以正常工作：

请参阅此代码笔并注意输入框在正方形内可见：http: //jsfiddle.net/dovrosenberg/kbmwfg1a/89/

如果我在 SVG 中定义了看起来相同但使用 JSON 的 XML：

请参阅此代码笔并注意输入框不可见：http: //jsfiddle.net/dovrosenberg/asnvwe1r/4/

当我在浏览器中查看它时，生成的 SVG 看起来几乎相同。我能看到的唯一区别是 JSON 版本插入joint-selector属性，但我认为这无关紧要。

更奇怪的是，如果您在调试器中编辑 HTML 并对 foreignObject 标记进行微小更改（例如更改关节选择器属性之一），则输入变为可见。

这不应该工作吗？

我正在使用jointJS 作为图表库。它使用 svg 元素在图上创建节点。

我想使用 react 来渲染这些节点的内容，并且由于jointJS 允许我配置我希望它使用的 svg 元素，我所要做的就是

• 配置jointJS，让它知道一个节点是一个 <foreignObject>
• 检索该异物，并使用在其中安装一个反应组件createPortal
• 动态调整外来对象的大小，使其适合反应组件。

它工作正常，但我没有足够的经验foreignObject知道是否有任何警告。

任何人都可以提供一些关于他们对这种做法的体验的反馈吗？

我正在尝试绘制此 SVG 路径。

我可以使用固定坐标的固定高度和宽度的 SVG Line 和 Curve 属性来实现它。

但是，我需要响应式地绘制它，这意味着路径的宽度、线之间的空间、每个点之间的距离以及两侧的曲线应该是响应式的。

它包含由数字表示的级别，如图所示，路径的长度应由给定的级别数确定。

在尝试响应式绘制时，我被困在

1. 获取线条的起点和终点
2. 获取曲线的控制点
3. 响应式调整每个点之间的距离和曲线之间的空间
4. 根据给定的级别数确定路径的长度

我正在尝试div通过一些数学计算使用基于 parent 宽度的百分比来完成这些。但是，由于其复杂性，它似乎打破了某些或其他情况。

除了这些，还有其他一些事情要做，但这是需要做的顶级版本。

是否有任何直接的方法或公式或计算来实现这一目标？（或）有没有其他方法来绘制这个？（或）是否有学习绘制这些类型的 SVG 路径的教程？

目前，我正在使用

它正在工作，但代码在我看来设计过度，因为我必须将工具提示容器绘制为 SVG 多边形。

此外，它在 Safari 中看起来并不好。所以我想使用 VictoryTooltip 作为我的 SVG foreignObject 的容器。

如果我使用多行文本，它看起来像这样：

但是有没有办法将文本更改为 SVG 容器或 HTML？

换句话说，我想使用现有的 VictoryTooltip 并将 CustomTooltip 包装在其中。但目前，CustomTooltip 正在替换现有的 VictoryTooltip 样式。

我正在尝试在 svg 中呈现下拉菜单，例如：

但是，当我单击它时，菜单的底部被切掉了：

我怎样才能解决这个问题？

这是代码框：

https://codesandbox.io/s/chakra-button-forked-7ig5f?file=/src/App.js

我正在向chakra-ui图表添加一个菜单下拉按钮（来自react-financial-charts，这是一个构建在 之上的库svg）。

出于某种原因，当我单击菜单时，按钮和下拉菜单之间会有空格。这只发生在我将菜单放到图表上时。如果我在浏览器中有独立的菜单，它将按预期工作。

这是菜单代码：

这是完整的代码框：

https://codesandbox.io/s/nervous-haze-3mz2c?file=/src/BasicLineSeries.tsx:511-1199

编辑

如果我按照其中一个答案的建议删除x={0}并y={0}包含在foreignObject其中，那么只有当图表位于页面顶部时，这才能解决问题。否则，如果在图表之前有一个，那么会发生这种情况：style={{ marginTop: "30px", marginLeft: "30px" }}MenuButtondiv

这是完整的代码框：

https://codesandbox.io/s/nostalgic-pare-c5rxu?file=/src/BasicLineSeries.tsx

我正在向foreignObject基于svg. 我想把它放在右上角svg，不管它有多大/小svg。所以我不想要一个硬编码的解决方案，我需要一个动态的解决方案。

width={'100%'} height={'100%'}在 中设置foreignObject是不可行的，因为它会使图表的其余部分无法点击。

我通过在里面手动设置x和手动获得了一个非动态解决方案，但我需要一个动态解决方案。yforeignObject

我怎样才能做到这一点？

代码沙盒：

https://codesandbox.io/s/floral-water-v11gx?file=/src/BasicLineSeries.tsx