svg 相关问题

在css中使用svg绘制圆形形状

如何使用CSS实现这一点？ （下图）

内联 SVG 文本 (js)

我想在完全用js定义的SVG中显示文本。 SVG 图片按预期显示，但文本却没有。 我已经在在线 SVG 查看器中尝试了实际的 SVG 定义，它有......

Material.js 的 JavaScript svg 比例问题

我正在使用 Matter.js 开发 Javascript 动画。链接在这里： https://codepen.io/Sergio-Escalona/pen/VwNrwbw document.addEventListener("DOMContentLoaded", function () { // ...

使用 JavaScript 访问 HTML 元素显示的连字符

鉴于 ... 给定一个 <div lang="en" style=" overflow-wrap: word-break; hyphens: auto; width: 86px; background-color: highlight; color: highlightText; font-size: 10px; "> This is a text that is long enough to cause a line break if set so. By using words like "incomprehensibilities", we can demonstrate word breaks. </div> 我想使用 JavaScript 访问带有连字符的格式化文本，以获得类似于以下内容的字符串： "This is a text that is long enough to cause a line break if set so. By using words like "incomprehensibilit-ies", we can demon-strate word breaks.". 注意incomprehensibilit-ies" and demon-strate`中的连字符。 这可能吗？ 用例是我需要一种方法，仅使用 SVG 元素即可在 SVG 的 <text> 元素中断开和连字符文本。 也许可以尝试一下 const wrapText = (context, text, x, y, maxWidth, lineHeight) => { const words = text.split(' '); let line = ''; words.forEach(word => { const testLine = line + word + ' '; const { width: testWidth } = context.measureText(testLine); if (testWidth > maxWidth && line !== '') { context.fillText(line, x, y); line = word + ' '; y += lineHeight; } else { line = testLine; } }); context.fillText(line, x, y); // Render the last line }; const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); const maxWidth = 400; const lineHeight = 25; const x = (canvas.width - maxWidth) / 2; const y = 60; const text = document.getElementById('e83v8').textContent; context.font = '16pt Calibri'; context.fillStyle = '#333'; wrapText(context, text, x, y, maxWidth, lineHeight); <div id="e83v8" style="width: 86px; background-color: red; font-size: 10px; overflow-wrap: word-break; hyphens: auto;">This is a text that is long enough to cause a line break if set so. By using words like "incomprehensibilities", we can demonstrate word breaks.</div> <canvas id="myCanvas" width="500" height="200"></canvas>

使用 JavaScript 访问 HTML 元素的显示文本

鉴于 这是一段足够长的文字，足以引起...... 给定一个 <div id="e83v8" style="width: 86px; background-color: red; font-size: 10px; overflow-wrap: word-break; hyphens: auto;">This is a text that is long enough to cause a line break if set so. By using words like "incomprehensibilities", we can demonstrate word breaks.</div> 我想使用 JavaScript 访问带有连字符的格式化文本，以获得类似于 "This is a text that is long enough to cause a line break if set so. By using words like "incomprehensibilit-ies", we can demon-strate word breaks." 的字符串。这可能吗？ 用例是我需要一种方法，仅使用 SVG 元素即可在 SVG 的 <text> 元素中断开和连字符文本。 也许可以尝试一下 const wrapText = (context, text, x, y, maxWidth, lineHeight) => { const words = text.split(' '); let line = ''; words.forEach(word => { const testLine = line + word + ' '; const { width: testWidth } = context.measureText(testLine); if (testWidth > maxWidth && line !== '') { context.fillText(line, x, y); line = word + ' '; y += lineHeight; } else { line = testLine; } }); context.fillText(line, x, y); // Render the last line }; const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); const maxWidth = 400; const lineHeight = 25; const x = (canvas.width - maxWidth) / 2; const y = 60; const text = document.getElementById('e83v8').textContent; context.font = '16pt Calibri'; context.fillStyle = '#333'; wrapText(context, text, x, y, maxWidth, lineHeight); <div id="e83v8" style="width: 86px; background-color: red; font-size: 10px; overflow-wrap: word-break; hyphens: auto;">This is a text that is long enough to cause a line break if set so. By using words like "incomprehensibilities", we can demonstrate word breaks.</div> <canvas id="myCanvas" width="500" height="200"></canvas>

如何为取消 svg 图标中的“x”着色

我正在看这个svg图标：https://www.iconfinder.com/icons/352263/cancel_icon 如何给圆内的 x 设置除透明以外的颜色？ 截屏 我正在看这个 svg 图标：https://www.iconfinder.com/icons/352263/cancel_icon 如何为圆内的 x 设置除透明以外的颜色？ 截图 <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z" fill="#b01e1e" class="fill-000000"> </path><path d="M0 0h48v48H0z" fill="none"> </path> </svg> 尝试使用不同的 svg 图标，因为您当前的 svg 没有 fill 部分的 X 属性 这应该可以帮助你： <svg class="frame" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_618_17)"> <path d="M24 4C12.95 4 4 12.95 4 24C4 35.05 12.95 44 24 44C35.05 44 44 35.05 44 24C44 12.95 35.05 4 24 4ZM34 31.17L31.17 34L24 26.83L16.83 34L14 31.17L21.17 24L14 16.83L16.83 14L24 21.17L31.17 14L34 16.83L26.83 24L34 31.17Z" fill="#e5e5e5" /> <!-- Changes the CIRCLE color --> <path d="M34 31.17L31.17 34L24 26.83L16.83 34L14 31.17L21.17 24L14 16.83L16.83 14L24 21.17L31.17 14L34 16.83L26.83 24L34 31.17Z" fill="#292929" /> <!-- Changes the `X` color --> </g> <defs> <clipPath id="clip0_618_17"> <rect width="48" height="48" fill="white" /> </clipPath> </defs> </svg>

SvgPicture 资源不起作用并显示“尝试将名称连接到已定义的名称，或定义名称”错误

我有一个Flutter项目，我制作了一个home.dart页面，想要将svg中的图标添加到AppBar，所以这是我的代码： 导入“包：flutter/material.dart”； 类 HomePage 扩展 StatelessWidget{ ...

运行 d3 示例代码时没有任何显示

我对 d3.js 和 javascript 很陌生。 我只是想尝试一些 d3 示例代码。 我从这里复制了 d3.js 代码。 我对 d3.js 和 javascript 很陌生。 我只是想尝试一些 d3 示例代码。 我从这里复制了d3.js代码。 <!DOCTYPE html> <meta charset="utf-8" /> <style> .node circle { fill: #999; } .node text { font: 10px sans-serif; } .node--internal circle { fill: #555; } .node--internal text { text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; } .link { fill: none; stroke: rgb(214, 15, 145); stroke-opacity: 0.4; stroke-width: 1px; } form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } label { display: block; } </style> <svg width="928" height="928"></svg> <script src="http://d3js.org/d3.v6.min.js"></script> <script> const data = { name: "Name", children: [ { name: "A_F", children: [ { name: "Alice", }, { name: "Bob", }, { name: "Charlie", }, ], }, { name: "G_P", children: [ { name: "Gary", }, { name: "Helen", }, ], }, ], }; // Specify the chart’s dimensions. const width = 928; const height = width; const radius = width / 6; // Create the color scale. const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)); // Compute the layout. const hierarchy = d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); root.each(d => d.current = d); // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .style("font", "10px sans-serif"); // Append the arcs. const path = svg.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); const format = d3.format(",d"); path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); const label = svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(d => d.data.name); const parent = svg.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = svg.transition().duration(750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } svg.node(); </script> 我唯一编辑的就是删除最后一个return svg.node();并将其更改为svg.node(); 当我启动本地http服务器（py3 -m http.server 8000）时，我发现浏览器中没有任何显示，并且当我点击inspect时也没有错误。 只是想了解如何分类这个问题并排除故障。谢谢！ 不幸的是，D3 规范示例通常在 Observable 上找到，虽然具有交互性和实用性，但如果不进行一两处更改，就无法转换为常规的 'ol javascript。 首先，Observable 使用 return svg.node() 返回一个分离的 DOM 元素以便显示它。分离的节点是使用 d3.create() 创建的。这在普通的 javascript 环境中不起作用：通常，您可以直接使用 d3.select("parentElement").append("svg") 附加 SVG，或者选择它（如果已经存在），如代码中所示 (d3.选择（“svg”）。 但是，您的示例具有一种数据格式，其中叶节点（本身没有子节点的节点）具有 value 属性： "children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812} 虽然您的数据没有： children: [{ name: "Alice", }, { name: "Bob", }, 这很重要，因为层次结构使用求和函数来列出每个节点的相对大小： const hierarchy = d3.hierarchy(data) .sum(d => d.value) 因此，您可以向每个叶节点添加一个 value 属性，这将生成一个视觉效果。但是，如果每个叶子应该具有相同的权重，那么您可以使用： const hierarchy = d3.hierarchy(data) .count() 其中每个父节点将根据每个分支中叶节点的数量进行加权。

如何防止 SVG 图标出现换行？

在 HTML 文档中，假设我有一个类似于链接的内容，该链接在另一个非空白字符之后开始，例如 p { 最大宽度：140px； } 这是一些包含链接的文本（&l... 在 HTML 文档中，假设我有一个类似链接的东西，在另一个非空白字符之后开始，例如 p { max-width: 140px; } <p>This is some text that includes a link (<a href="https://example.com">example</a>)</p> 如果视口宽度使得该行必须在链接文本的第一个单词的中间中断，则前面的字符（在本例中为左括号）“粘”到链接，即标准布局算法在最近的前面的空白处断行。 但是，如果我想在 a 元素的开头插入 SVG 图标： p { max-width: 140px; } <p>This is some text that includes a link (<a href="https://example.com"><svg style="height: 1em; color: green;" viewbox="0 0 10 10" fill="currentColor"><circle cx="5" cy="5" r="5" /></svg>example</a>)</p> 现在允许该线断开 SVG 的任一侧。 问题 有什么方法可以让布局引擎像对待普通文本字符一样对待 svg，以便左括号仍然“粘在”链接文本上吗？ 我无法制作整个段落或整个链接white-space: nowrap - 我想要文本能够在链接内部和外部正常换行，我只需要它而不是打破<svg> （除非整个链接前面有空格）。基本上，我希望能够在链接的开头插入一个图标，而不干扰正常的文本布局行为，就好像该图标只是另一个字符，其 Unicode 属性与现有链接文本的第一个字符相同。 这可能吗？ 我为您提供了一个解决方案，需要进行 2 个基本更改 将 SVG 转换为 .svg 图像 URL。 将 ::before 添加到锚标记并将 SVG 添加到其 content 示例： p { max-width: 140px; } a { position: relative; display: flex; align-items: center; justify-content: center; } .a::before { content: url('https://img.cdn4dd.com/s/media/photosV2/1954ba82-d91f-43a2-8838-767fd2ad386f-retina-large.svg'); display: block; width: auto; height: auto; } <p> This is some text that includes a link <a class="a" href="https://example.com"> <span> &#40;example&#41; </span> </a> </p> 我并不100%明白你在追求什么。 <nobr>可以将内容放在一起： p { width: 140px } <p>This is some text that includes a link <nobr>( <a href="https://example.com"> <svg style="height: 1em; color: green;" viewbox="0 0 10 10" fill="currentColor"><circle cx="5" cy="5" r="5" /></svg>example </nobr> </a>)</p>

当鼠标在 svg 文件中输入 ID 时，事件侦听器不起作用

我创建了一个简单的代码来处理和学习 SVG 文件和事件监听器。 <

从 Adobe Illustrator 导出 SVG 会生成奇怪的代码

在我公司正在开发的应用程序中，需要将 Adobe Illustrator 生成的符号添加为 SVG 文件。这是一个漫长的开发过程，我们已经有了一个图书馆......

使用 UI 操作 SVG 元素和属性

我想要一个在单击 SVG 的子元素时出现的面板。 该面板应显示所选对象的属性， 并允许直接修改这些属性，w...

仅使用 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 属性，并且使用