svg 相关问题

可缩放矢量图形(SVG)是一种基于XML的二维矢量图形格式,也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反,如果您的问题是关于SVG或与其密切相关的问题,请添加标记,例如如何使用SVG实现某些功能。

对于 JavaFX 的 WebEngine,如何收到 javascript 错误通知?

我正在尝试在JavaFX的WebView中运行一些包含Javascript的SVG。 我知道我尝试运行的一些脚本有错误,并且正在尝试找出如何将它们打印到控制台,所以我...

回答 2 投票 0

SVG:如何显示多个路径并绕中心旋转它们?

我是 SVG 新手。 我试图用 defs 中的路径定义一个“模板”并重用它。 我希望路径围绕中心旋转,且路径之间的间距相等 这就是我走了多远...

回答 1 投票 0

TypeScript 中的月相图形错误地呈现了盈亏相位

我正在开发一个 React/TypeScript 组件,它根据 0 到 1 之间的值渲染月相。问题是月相在第一 Qu 之间无法正确渲染...

回答 1 投票 0

如何使用 Tailwind CSS 将 SVG 图标保持在无序列表内的同一行?

svg 图标没有留在文本中,即使我在图标的类中有“flex”。 这是示例代码: svg 图标没有留在 文本中,即使我在图标的类中有“flex”。 这是示例代码: <ul class="my-12 bg-amber-100 p-6"> <li class="list-disc text-wrap text-xl"> Before before before before before before before before (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" /></svg >) After after after after after after after after after </li> </ul> 这是屏幕上显示的屏幕截图: 使用“inline-flex”代替 SVG 类中的“flex” 更正的示例代码: <ul class="bg-amber-100 p-6 my-12"> <li class="list-decimal text-wrap text-xl"> Before before before before before before before before (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 inline-flex" > <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" /></svg>) After after after after after after after after after </li> </ul> 代码修正后的截图:

回答 1 投票 0

转换 SVG 线位置

document.addEventListener("DOMContentLoaded", (event) => { const hamburgerButtons = document.querySelectorAll('.hm-button'); const 汉堡行 = [ { 关闭:{ x1:13, ...

回答 1 投票 0

如何在 OpenVG 上下文中导入 SVG?

我有一个C程序,使用OpenVG来显示矢量动画。所有的对象都是通过一次又一次地编写 VG 函数创建的...我与一位艺术家合作,他可以为我提供 vect 的 SVG 文件...

回答 4 投票 0

将焦点转移到 svg 中的组元素

将焦点转移到 svg 中的组元素 我有一个又高又宽的 svg,由 graphviz 生成。 如果我用浏览器打开 svg 我可以搜索 文本和焦点将移动以显示所查找的文本。 我...

回答 1 投票 0

编辑“.svg”图像时,Inkscape 非常非常滞后。谁能告诉我该怎么做才能让 Inkscape 运行得更快?

我使用R来分析单细胞RNA测序数据,并将t-sne和umap结果保存到“.svg”图像中。编辑那些“.svg”图像时,Inkscape 非常非常滞后。什...

回答 2 投票 0

如何在 SVG 蒙版内制作阴影?

我正在处理一个SVG,我在我的设计周围做了一个边框,并使用蒙版“挖空”了中间。现在我想在边框内部应用阴影......

svg
回答 1 投票 0

将 svg 作为 prop 传递给角度组件

我正在尝试创建一个动态工具箱组件,并且我希望在工具箱的每个图块上绘制图像的 svg,以便从我传递到工具箱图块组件的这个 svg 字符串中绘制...

回答 1 投票 0

如何将方形 SVG 完美地置于方形按钮内?

我尝试使用此解决方案来帮助我将方形 SVG 置于方形按钮的中心(当然,水平和垂直)。主要区别在于,在解决方案中,t 的坐标系...

回答 1 投票 0

SVG 过滤器 Safari 问题

各位, 我在使用以下 SVG 过滤器时遇到问题。在其他所有浏览器中,它都可以正常工作,但在 Safari 中,它根本不适用。你能帮我解决这个问题吗?我哦...

回答 1 投票 0

无法使用 Apache FOP 在 PDF 中绘制 SVG - 遇到未知格式对象“{}svg”(fo:instream-foreign-object} 的子级

我使用 XSL-FO 在表中为简单的复选框创建了以下代码: Java代码 元素 svg = document.createElement("svg"); svg.setAttribute("宽度", "12pt"); svg。

回答 1 投票 0

Java:无法使用 Apache FOP 在 PDF 中绘制 SVG - 遇到未知格式对象“{}svg”(fo:instream-foreign-object} 的子级

使用 XSL-FO 在表中为简单的复选框创建了以下代码: Java代码 元素 svg = document.createElement("svg"); svg.setAttribute("宽度", "12pt"); svg。

回答 1 投票 0

如何增加旋转圆SVG的笔划高度(如何使其更粗)

我正在尝试增加这个旋转 SVG 圆圈的厚度。不知道是冲程高度还是什么。我已尽我所能,但似乎网站中的 SVG 编辑器不包含

回答 1 投票 0

SVG圆,半径百分比是多少?

我有以下代码: 。容器{ 宽度:100px; 高度:200px; 背景颜色:红色; 调整大小:两者; /* 只是为了让它... */ 溢出:隐藏; /* ...

回答 1 投票 0

缩放 SVG 中的文本

我正在尝试了解 SVG 中的文本缩放。 在这里 我正在尝试了解 SVG 中的文本缩放。 在这里 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg width="59.018078mm" height="80.593658mm" viewBox="0 0 59.018078 80.593658" version="1.1" id="svg1" inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)" sodipodi:docname="scale_check.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <sodipodi:namedview id="namedview1" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="0.91537085" inkscape:cx="56.807577" inkscape:cy="222.86049" inkscape:window-width="1862" inkscape:window-height="1016" inkscape:window-x="58" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="layer1" showgrid="false" /> <defs id="defs1" /> <style id="style1"> text { font-size:6px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';stroke-width:0;stroke:none } </style> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-1.322437,-0.79811096)"> <text xml:space="preserve" x="9.4902344" y="45" id="text_manual"><tspan sodipodi:role="line" id="tspan2" x="9.4902344" y="45">original text</tspan></text> <rect style="fill:#a400ff" id="rect3" width="4" height="4" x="10" y="10" /> <rect style="fill:#a40000;stroke:none" id="rect1" width="4" height="4" x="10" y="10" transform="scale(1,2)" /> <text xml:space="preserve" x="13.429504" y="46.268539" id="text3" transform="scale(0.70710677,1.4142136)"><tspan sodipodi:role="line" id="tspan3" x="13.429504" y="46.268539" style="stroke-width:0">scaled text</tspan></text> </g> </svg> 矩形在 y 轴上缩放 200%,并且高度加倍,正如预期的那样。 然而,文本(高度也加倍)在 y 轴上按 sqrt(2) 缩放,在 x 轴上按一半缩放。 这是什么原因? 这是因为缩放也适用于内部 tspan,因此会平方吗?为什么 x 坐标也会缩放,尽管在视觉上两个文本是左对齐的? 以下图片供参考: 文本实际上在 y 中缩放了 200%,而在 x 中没有缩放。它只是在视觉上看起来很不一样。如果您对两段文本中的 a 和小写 L 进行像素比较 - 这就是您得到的结果。

svg
回答 1 投票 0

如何在 HTML 中以不同尺寸渲染 SVG?第 1 层 鉴于这个 svg: <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <ellipse stroke="#000000" ry="210.999999" rx="259.000004" id="svg_1" cy="237.727263" cx="324.999989" stroke-width="5" fill="#FF0000"/> </g> </svg> 如何将其缩放到用户 320x240,而无需重新计算里面的数字?这可能吗? 添加 viewBox="0 0 640 480" 并将 width="320" height="240" 设置为 <svg> 元素以缩放 SVG。您可以疯狂使用 width 和 height 并使用 preserveAspectRatio 属性控制纵横比。 使用 viewBox 属性来控制您可以在页面中看到的内容。或者将内容包装在 <g> 元素中,并在其上设置 0.5 的缩放变换。

鉴于这个 svg: 第 1 层 鉴于这个 svg: <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <ellipse stroke="#000000" ry="210.999999" rx="259.000004" id="svg_1" cy="237.727263" cx="324.999989" stroke-width="5" fill="#FF0000"/> </g> </svg> 如何将其缩放到用户 320x240,而无需重新计算里面的数字?这可能吗? 添加 viewBox="0 0 640 480" 并将 width="320" height="240" 设置为 <svg> 元素以缩放 SVG。您可以疯狂使用 width 和 height 并使用 preserveAspectRatio 属性控制纵横比。 使用 viewBox 属性来控制您可以在页面中看到的内容。或者将内容包装在 <g> 元素中,并在其上设置 0.5 的缩放变换。

svg
回答 2 投票 0

CSS Clip-path 属性:相对路径➰

我正在尝试将 css Clip-path 属性与路径一起使用。但我无法构造一个以相对方式定义的路径,类似于剪辑路径:polygon(50% 0, 100% 50%, 50% 100%, ...

回答 1 投票 0

如何将多个 svg 文件转换为 pdf

我正在开发一个项目,需要从多个 SVG 文件创建一个 PDF 文件。我决定为每个 SVG 文件创建临时 PDF 文件,以便稍后将它们组合在一起(也许使用...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.