svg 相关问题

仅使用 JS 或 CSS 的 Svg 动画

我想在网站初始化时为 svg 制作动画。 我可以仅用 JS 或 CSS 创建一些类似视频的动画吗？ https://elements.envato.com/dots-logo-reveal-2in1-V72XYFP 这是 svg： ...

心形图像剪辑 - 旋转/缩放几何对象

最终目标 剪辑一个心形的图像。 试图 我已将此源的 svg 路径数据转换为其等效的几何图形。除了我必须旋转最终的几何对象，除非......

React：SVG 通过 id 或 class 动态添加 CSS

在React中我有一个svg文件，例如mySVG.svg 在React中我有一个svg文件，例如mySVG.svg <svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <rect id="Unit1" class="class1" x="0" y="0" width="10" height="10" fill="blue"/> <rect id="Unit2" class="class1" x="10" y="10" width="10" height="10" fill="blue"/> <rect id="Unit3" class="class2" x="20" y="20" width="10" height="10" fill="blue"/> </svg> 然后，在组件文件中Example.tsx，我想根据传入的 props 动态设置 svg 的颜色 import { ReactComponent as mySvg} from 'assets/mySVG.svg'; export function Example(props:{highlighted:string}):ReactElement { if (props.highlighted === 'Unit1') { return ( <mySvg //set unit 1 fill color to red /> ); } return ( <mySvg /> ); } 如何根据 svg 路径的 id 和 className 动态设置 svg 的填充颜色？ 导入已定义颜色的静态 css 文件将不起作用，因为我需要它动态工作。 首先，我想向您推荐这个网站，它将普通的svg代码转换为jsx组件。 使用 svg 将必要的 props 传输到组件就足够了 mySVG.jsx： import * as React from "react" function mySVG({color = "#000000", className = "", width = 50, height = 50}) { return ( <svg className={className} width={width} height={height} xmlns="http://www.w3.org/2000/svg" > <path fill={color} d="M0 0h10v10H0zM10 10h10v10H10z" /> <path fill={color} d="M20 20h10v10H20z" /> </svg> ) } export default mySVG 并使用 svg 将必要的数据传输到您的组件 import mySVG from "/you/path/mySVG" // other code.... return ( <mySVG color="#ffffff" height={100} width={100} className="my-svg-style" /> ); 您可以操作正在导入的文件，但我认为最简单的方法是将 SVG 嵌入 JSX 组件中或将其转换为一个。 请参阅此处的示例： https://codesandbox.io/s/happy-galois-1tfce 编辑：向 SVG 内容添加了节点操作和重新序列化。 给定 svg 文件 mySVG.svg <svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <rect id="Unit1" class="class1" x="0" y="0" width="10" height="10" fill="blue"/> <rect id="Unit2" class="class1" x="10" y="10" width="10" height="10" fill="blue"/> <rect id="Unit3" class="class2" x="20" y="20" width="10" height="10" fill="blue"/> </svg> 我创建了一个辅助函数来获取给定 Ref 的 DOM getDOMNodeById.ts export type DOMNode = Element | ChildNode | Text | null; export function getDOMNodeById(componentDOMNode:DOMNode, id:string): DOMNode | void { if (componentDOMNode?.nodeType === Node.ELEMENT_NODE) { const element = componentDOMNode as Element; if (element.id === id) { return element; } else if (element.hasChildNodes()) { for (let i=0; i<element.childNodes.length; i++) { const childNode = element.childNodes[i]; const result = getDOMNodeById(childNode, id); if (result) { return result; } } } } } export const isHTMLElement = (v:any): v is HTMLElement => { return v instanceof Element || v instanceof HTMLElement; } 将它们捆绑在一起，向 svg React 组件添加 Ref，调用辅助函数来获取 Ref 的 DOM，然后改变返回的 Element Example.tsx import { ReactComponent as mySvg} from 'assets/mySVG.svg'; import { DOMNode, getDOMNodeById, isHTMLElement } from './getDOMNodeById'; export function Example(props:{highlighted:string}):ReactElement { const svgRef = useRef(null); const svgDOM = ReactDOM.findDOMNode(svgRef.current); if (props.highlighted === 'Unit1') { const unit = getDOMNodeById(svgDOM, 'Unit1'); if (isHTMLElement(unit)) { unit.style.fill = 'red'; } } return ( <mySvg ref={svgRef} /> ); }

D3 - 生命之树图未显示数据

我正在尝试添加此系统发育树视图 https://observablehq.com/@d3/tree-of-life 进入仪表板。完整的代码可以在那里找到，并在页面上提供下载链接。 我可以得到我自己的数据...

字体系列如何与 unicode

我创建的 svg 文件存在以下问题。我需要许多字体的各个字母的图像，包括异国情调的字体。为此，我编写了以下 svg 文件，并相应地

如何将颜色应用于 SVG 文本元素

好吧...我要疯了。我已经开始尝试 SVG。使用 SVG 并对其应用 CSS 类就像一个魅力。我只是不知道我做错了什么，但我只是...

如何使用 <use> 标签和 javascript 插入现有的 SVG 图形？

我无法显示通过 JavaScript 构建的 SVG 图形。 svg 存储在零件中。我首先使用 html 正确显示 svg。如果我尝试用 JavaScript 显示相同的图形，什么也没有......

应用！对SVG填充属性很重要

我尝试将 !important 应用于 SVG 文件的 fill 属性，但似乎这里的语法是错误的，!important 未应用于 fill 属性，并且使用

为什么 DIV 中的 SVG 与 BUTTON 元素中的 SVG 对齐方式不同

我在 DIV 和 BUTTON 元素内有一个 SVG 元素。在 Button 中，它垂直和水平居中对齐，在 DIV 中，它在顶部和左侧对齐。 我已经检查了这两个元素，但无法

导入 svg 时出现 React vite typescript 错误 - 找不到模块 .svg?react

我已按照有关如何使用 vite-plugin-svgr 的说明进行操作。我已经安装了它，并向 vite-env.d.ts 添加了用于类型推断的声明助手： // / 我已按照有关如何使用 vite-plugin-svgr 的说明进行操作。我已经安装了它并添加了一个用于类型推断的声明助手到 vite-env.d.ts: // / <reference types="vite/client" /> // / <reference types="vite-plugin-svgr/client" /> 我的资产文件夹中有一个 svg 文件，我将其导入到我的组件中： import Logo from '../assets/mountain.svg?react' 但是，我收到打字稿错误： TS2307: Cannot find module '../assets/mountain.svg?react' or its corresponding type declarations. 如何避免这个错误？ 我还尝试将 svg 类型声明为 ReactComponent： declare module '*.svg' { import * as React from 'react' export const ReactComponent: React.FunctionComponent< React.SVGProps<SVGSVGElement> & { title?: string } > } 然后像这样导入 svg： import { ReactComponent as Logo } from '../assets/mountain.svg' 但是，然后我得到一个错误： Uncaught SyntaxError: The requested module '/src/assets/mountain.svg?import' does not provide an export named 'ReactComponent' 以防万一它仍然有用 // / <reference types="vite/client" /> // / <reference types="vite-plugin-svgr/client" /> 应该是 /// <reference types="vite/client" /> /// <reference types="vite-plugin-svgr/client" /> 我遇到了同样的问题，通过这种方式解决了。

SVG Sprite 在不同分组标签上具有样式属性

我有一个精灵图SVG，示例用法如下： 我有一个精灵图SVG，示例用法如下： <svg aria-hidden="true" class="block w-full h-full block"><use xlink:href="/src/assets/sprite.svg?t=123#triangle"></use></svg> 这会在 Shadow DOM 中加载三角形 SVG，如下所示： <svg viewBox="0 0 1920 1080" fill="currentColor" id="battery_distributor"><path d="M150 5 75 200h150Z"></path></svg> 然而，三角形SVG是这样设置的： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"> <path d="M150 5 L75 200 L225 200 Z" style="fill: none; stroke: green; stroke-width: 3" /> </svg> 但它在输出 DOM 上通过 sprite 填充为黑色。 我的猜测是因为我用来构建精灵地图的 vite-svg-sprite-wrapper 插件 https://github.com/vshepel/vite-svg-sprite-wrapper正在剥离样式属性。 是否有另一种方法可以通过 Vite 中的单个 React Typescript 组件添加 SVG 文件，该方法仍然支持不同分组 g 标签上的自定义样式属性？ 该插件的文档链接到此 SVG Sprite 工具 https://github.com/svg-sprite/svg-sprite/ 依次提到它使用 svgo - https://github.com/svg/svgo 编辑： 实际的 SVG 有这样的东西，只是假的路径号。问题是，使用描边的第一个分组子项显示正确，但使用填充的第二个分组子项不显示，因为我有 color: transparent 来尝试避免奇怪的背景剪切灰色： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"> <g> <g transform="matrix(1,0,0,1,200,500)" opacity="1" style="display: block;"> <g opacity="1" transform="matrix(1,0,0,1,0,0)"> <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke-dasharray="10" stroke="rgb(0,0,0)" stroke-opacity="0.35" stroke-width="3" d="M-20, 100"> </path> </g> <g opacity="1" transform="matrix(1,0,0,1,0,0)"> <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke-dasharray="10" stroke="rgb(180,211,46)" stroke-opacity="1" stroke-width="3" d="M-20, 100"> </path> </g> </g> <g transform="matrix(1,0,0,1,1,0)" opacity="1" style="display: block;"> <g opacity="1" transform="matrix(1,0,0,1,1,0)"> <path fill="rgb(0,0,0)" fill-opacity="0.35" d="M1, -28z"> </path> </g> <g opacity="1" transform="matrix(0, 0, 1, 1)"> <path fill="rgb(180,211,46)" fill-opacity="1" d="M1, -28z"> </path> </g> </g> </g> </svg> 找到了修复，所以基本上 vite-svg-sprite-wrapper Vite 插件是 svg-sprite 的包装器，但这使用 svgo 阅读完所有文档后，有一个 sprite 配置选项，用于配置 svg-sprite 的工作方式。因为它有一个选项可以使用 svgo 配置 shape.transform 的转换 我想保留相同的默认预设，并且只为 removeStyleElemets OVVERIDE svgo 插件，因此我的最终代码现在是： ViteSvgSpriteWrapper({ icons: 'public/animations/*.svg', outputDir: 'src/assets', sprite: { shape: { transform: [{ svgo: { plugins: [{ name: 'preset-default', params: { overrides: { removeStyleElement: false, } } }] } }] } } }), ...这有效，样式属性保留在 g 标签上。

创建 SVG，在纯 Javascript 中设置 href 而不是 xlink:href

我有一个包含所有图标的 SVG 精灵，当在 Javascript 中动态添加图标时，我使用以下代码： 让 closeButton = document.createElementNS("http://www.w3.org/2000/svg", "...

带有剪辑路径的三角形 ||过度“剪辑”的背景？

我已经在 SVG 和剪辑路径上苦苦挣扎了一段时间。 我正在尝试创建一个三角形剪辑路径，该路径将覆盖照片以赋予顶部“三角形”边缘。 我正在努力实现

如何通过鼠标移动 SVG 多边形元素？

我想用鼠标移动这个多边形。我怎样才能做到这一点？ 我想我应该使用 onMouseDown 和 onMouseMove 之类的方法获取新位置并转换 =“translate(x,y) 但我如何通过 JS 做到这一点？

SVG 过滤器在 Firefox 中未显示，在 Chrome 中工作正常

我想要深色背景上的一段深色文本外面有白色的光芒。虽然 CSS 中默认的阴影过滤器（如过滤器：drop-shadow(2px 2px 2px black)）正式应该支持...

在 Python 中重新组合 root.findall(".//") 中的元素

我正在将 BytesIO SVG 数据解析为元素树。我从以下内容开始： 树 = ET.parse(svg) 根 = 树.getroot() 根在哪里： ...

SVG 徽标 - 如何将路径组视为可复制粘贴字符？

这组路径（使用Figma制作）渲染为代表字母f的东西 这组路径（使用 figma 制作）呈现为代表字母 f 的东西 <svg xmlns="http://www.w3.org/2000/svg" width="580" height="180" viewBox="0 0 580 180" fill="none"> <g id="f"> <path id="f_body" d="M459 37.763C476.182 32.737 509.41 32.869 509.944 52.842C510.054 65.679 509.947 137.992 510 138" stroke="black" stroke-width="7.99608" stroke-miterlimit="8" stroke-linecap="round"/> <path id="f_line_bot" d="M469 142H531.332" stroke="black" stroke-width="7.99608" stroke-miterlimit="8" stroke-linecap="round"/> <path id="f_line_top" d="M469 70H531.332" stroke="black" stroke-width="7.99608" stroke-miterlimit="8" stroke-linecap="round"/> </g> 有没有办法确保这个“f”可以像常规 <text> 元素一样复制粘贴？ <svg xmlns="http://www.w3.org/2000/svg" width="580" height="180" viewBox="0 0 580 180" fill="none"> <text x="10" y="40" font-family="Arial" font-size="24" fill="black"> f </text> 不，<path>代表字母F， 甚至 Figma 也看不到 F。 你可以把它读成F。 你可以编写软件 寻找id="f”符号， 解析所有路径（这将花费您相同的时间） 并创建一个文本路径， 但是手动完成一个字母表可能会更快。

找到SVG多边形的点并添加手柄（圆圈）

我有许多 SVG 多边形形状，需要在每个点添加手柄（圆圈）。我当然可以像这样手动添加这些圆圈： 我有许多 SVG 多边形形状，需要在每个点添加手柄（圆圈）。我当然可以像这样手动添加这些圆圈： <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <style type="text/css"> .st0{fill:#7BD0FF;fill-opacity:0.46;stroke:#3BB0FF;stroke-width:3;stroke-miterlimit:10;} .st1{fill:#FF4F4F;} </style> <polygon class="st0" points="266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06 225.76,580.49 359.86,363.34 153.38,388.49 "/> <circle class="st1" cx="266.14" cy="191.92" r="8"/> <circle class="st1" cx="471.86" cy="127.15" r="8"/> <circle class="st1" cx="530.52" cy="302.39" r="8"/> <circle class="st1" cx="666.14" cy="388.49" r="8"/> <circle class="st1" cx="550.33" cy="633.06" r="8"/> <circle class="st1" cx="225.76" cy="580.49" r="8"/> <circle class="st1" cx="359.86" cy="363.34" r="8"/> <circle class="st1" cx="153.38" cy="388.149" r="8"/> </svg> 但是，我需要对数百个点执行此操作，当坐标已经以多边形点的形式存在时，手动输入圆的坐标似乎效率低下。 如何检测现有多边形的点并在每个点处放置一个手柄？看起来它应该非常简单，但我正在努力实现它。 当然 – 您可以拆分 points 属性，然后拆分每个坐标，并从那里创建元素。 请注意，这不会考虑多边形的变换等。 const svg = document.querySelector("svg"); const poly = document.querySelector(".st0"); for (const p of poly.getAttribute("points").split(" ")) { const [x, y] = p.split(",").map(c => parseFloat(c)); const el = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); el.className = "st1"; el.setAttribute("cx", x); el.setAttribute("cy", y); el.setAttribute("r", 8); svg.appendChild(el); } .st0 { fill: #7BD0FF; fill-opacity: 0.46; stroke: #3BB0FF; stroke-width: 3; stroke-miterlimit: 10; } .st1 { fill: #FF4F4F; } <svg width="800" height="800"> <polygon class="st0" points="266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06 225.76,580.49 359.86,363.34 153.38,388.49"/> </svg>

是否可以使用css变换更改svg路径高度？ （不是比例，不是整个 svg，只有一条路径）

我正在尝试增加 SVG 路径（边框）的高度，但遇到的问题是边框被隐藏，仅向下生长（而不是向上），并且圆角被拉伸。我...

如何滚动以沿着调整 SVG 大小的路径将 SVG 移动到窗口中心？

我按照这篇文章如何调整 SVG 大小，并成功地在调整 SVG 大小时使红色方块始终位于路径上。然而，一个新问题出现了：向下滚动时，红色方块没有移动......