问题标签 [svgpanzoom]
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.
javascript - 在单个 div 中堆叠两个嵌入式 SVG
我有一对以编程方式生成的复杂黑白 svg 文件。FWIW 它们代表了电路板设计的两个修订版。
这里有两个例子
我试图在视觉上比较它们，如果我对这些文件中的每一个应用一个 feMatrix 过滤器并覆盖它们，我可以获得两个文件的不同之处。
我已经使用 pan-zoom-svg 使用此策略在单独的div 中同步缩放/平移两个版本，以便可以将两个图像放大到相同的感兴趣区域。
我希望能够平移和缩放组合图像。为了实现这一点，我尝试在样式表中放置两个具有固定属性的 svg，以保持它们对齐。封闭的 div 具有相对属性。图像在嵌入标签中（我也尝试过对象标记。pan-zoom-svg 不支持处理标记为 svgs 的图像）。
合并后的图像完全符合我的要求 - 我可以根据需要平移和缩放它，但是我无法将它放在最终网页的 div 中，因为它会溢出。
我不清楚这是我的代码中的缺陷还是 svg-pan-zoom 的限制。对单个而不是两个 svg 副本使用相同的技术可以完美地工作。
我正在以编程方式生成多个修订的比较页面。
两个过滤后的图像都对齐并正确平移和缩放，但是，我似乎无法将它们放在 div 中以与网页的其余部分一起设置它们的样式。
[编辑删除不正确的标记格式隐藏一些文本]
svg - 如何在 nodejs 应用程序中使用 svgpanzoom
我正在尝试将svg.panzoom.js 2.0.2 用于 Electron 应用程序，但我认为是关于如何将插件包含到应用程序中的问题。这是我的html
然后在我的index.js文件中
但是 PanZoom 不被认为是 SVG 的功能。任何想法？
typescript - 从 DOM 或 Object 元素下载 svg 文件
我想从 DOM 下载/保存 .svg。我已将我的 svg 文件嵌入到 Object 元素中，并动态更新 SVG 中的一些元素，并在我的 Angular 7 应用程序中对其进行样式设置。
更新 SVG 后，我需要在 .svg 文件中下载/保存整个 svg contnet。或任何其他替代选项可用于下载更新的 svg 文件？
svg - SVGPanZoom 丢弃原来的 viewBox
我正在使用 SVGPanZoom 在我的混合 Android 应用程序中管理 SVG 图像的缩放（所有意图和目的都与 Chrome 中的行为相同）。虽然缩放效果很好，但我发现了一个奇怪的问题。我原来的内联 SVG 元素是这样的
最初，这个 SVG 元素是空的，并在运行时从 JavaScript 以编程方式填充，之后我按如下方式启动 SVGPanZoom
我遇到的问题是 - 我希望我的 SVG 图像填充可用区域，100vw x 85.5vh完全做到这一点，我通过preserveAspectRatio="none"上面的属性指示它以及viewBox="0 0 1600 770" attribute. I have found that this works - so long as I don't use SVGPanZoom. As soon as I initiate panZoom thezoomBox`属性被剥离，我最终得到一个不就其默认的拉伸/填充行为而言，其行为相当。
SVGPanZoom 被广泛使用，所以我认为这种行为是由于我没有正确设置它。深入研究我发现 SVGPanZoom 创建的代码cacheViewBox，然后继续删除原始的 zoomBox 属性。
如果在该缩放工作之后并且应用程序的原始行为没有改变（这不是我发现的），那很好。我在这里做错了什么？
svgpanzoom - 从 svg-pan-zoom 获取当前缩放和平移值
我正在使用 react js，为映射 svg 图像应用平移和缩放，我正在初始化 Svgpanzoom 实例，如下所述
平移和缩放后，我需要缩放和平移的确切值。我怎样才能得到它们？
javascript - 使用 react-native-svg-pan-zoom 缩放后 Svg 图像变得模糊
我正在使用该react-native-svg-pan-zoom库在 react native 中平移和缩放 svg 组件。但问题是，当我设置maxScale超过 1 时，组件变得模糊。请帮我解决这个问题......当我增加比例值时，质量会提高，但 svg 会超出画布，因此看起来会被裁剪。
当前输出：缩放后 svg 变得模糊，并且树大小（svg 大小）增加。
预期输出：我不希望图像在缩放时模糊。
javascript - R Shiny：如何在输入更改时保持 svgPanZoomOutput 的缩放和平移？
我有一个Shiny应用程序，我在其中显示一些图像。对于我拥有的选定图像pan和zoom（使用svgPanZoom包）和亮度变化（使用sliderInput）。同样在按钮单击时，我将移至下一个图像。不幸的是，每当我单击按钮或更改滑块上的值zoom并pan正在重置时（这并不奇怪）。请参见下面的示例：
有什么方法可以保持pan和zoom值的inputs变化？我正在考虑使用 javascript 代码保存这些值并使用 将它们发送到新输入Shiny.setInputValue，但现在我什至无法获取当前pan和zoom.
这是我尝试运行的示例应用程序代码和 JS：
svg - 将 SVG 旋转 90 度后平移无法正常工作
当我尝试将平移和可缩放的 svg 旋转到 90 度时，旋转已经发生并且缩放也如预期的那样正常。但是，当我尝试平移旋转的 svg 时，它无法按预期正常工作。如果我单击并将鼠标向左拖动，则 svg 向上移动，如果我向右拖动，则向下移动。我单击旋转按钮，放置变换 g 标签并在 svg 的 svg 内部 html 周围应用。
javascript - SVGPanZoom 干扰动态 foreignObject 内容
我想在我的 svg 地图上选择用户可以编写一些简单的文本。我想使用 foreignObject 和输入类型文本来做到这一点。
问题是当我包含用于基本缩放/平移地图功能的 SVGPanZoom 库时（https://github.com/ariutta/svg-pan-zoom），它不起作用。我是 svg 的新手，如果有任何建议，我将不胜感激。我也尝试使用 contenteditable = "true" 但我再次面临与图书馆相同的问题。
javascript - JS在嵌入中获取svg对象
我有一些像下面这样的简单 html，我需要在 JS 脚本中访问 SVG 对象，而我的时间很糟糕。
加载此页面后，会出现一个新文档，其中svg包含object. 我可以用 选择对象标签document.querySelector("#demo-tiger")，这似乎工作正常，但绝对无法访问其中的 svg。我试过了contentDocument，getSVGDocument()还有我能想到的一切。他们都出现了null。
任何指导将不胜感激。