svg 相关问题

在 Avalonia 中绘制 svg 图标

我在使用 FluentAvalonia v2.0.5 框架在 avalonia v11.0.6 中渲染 SVG 图标时遇到一些问题。 示例 svg： 我在使用 FluentAvalonia v2.0.5 框架在 avalonia v11.0.6 中渲染 SVG 图标时遇到一些问题。 示例 svg： <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" stroke="#202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> 代码使用： xmlns:ui="using:FluentAvalonia.UI.Controls" <ui:FAPathIcon Data="M12.3101 16H16.3101M12.3101 16H5.31006C4.77963 16 4.27092 15.7893 3.89584 15.4142C3.52077 15.0391 3.31006 14.5304 3.31006 14V6C3.31006 5.46957 3.52077 4.96086 3.89584 4.58579C4.27092 4.21071 4.77963 4 5.31006 4H19.3101C19.8405 4 20.3492 4.21071 20.7243 4.58579C21.0993 4.96086 21.3101 5.46957 21.3101 6V8.24454M12.3101 16V20M12.3101 20H16.3101M12.3101 20H8.31006" /> 预期输出： 实际输出： 据我了解，问题是我无法将填充设置为“无”作为渲染规则，而且我不知道如何实现这一点。 问题是我如何在 avalonia 中绘制此类或类似的 svg 图标。 我安装了 Avalonia.Svg.Skia 软件包以便在 Avalonia 项目中使用 Svg 图像。 您可以轻松地在 Rider 或 Visual Studio 等现代 IDE 中添加此包。 安装后，您可以在 Avalonia 应用程序中使用 Svg 图像，如下所示： <Svg Path="/Assets/__AJ_Digital_Camera.svg"/> 该软件包还支持许多其他功能，您可以查看上面的链接以获取更多有用的信息。

修改SVG路径厚度

我想修改 bootstrap 4 复选框勾选 SVG 路径编号，但我不知道如何修改这些数字来实现此目的。 ...

在NextJS中，引用包含SVG的外部npm包时如何构建？

我的 nextjs 项目（我们称之为 TheHost）引用了另一个 npm 包（我们称之为 ThePackage）。 在 TheHost 中定义时，SVG 加载正常，但导入 ThePackage 失败，因为 next 尝试

将 SVG 节点（Macaw）转换为 NSImage Swift4 / Cocoa

我正在尝试将 Macaw SVG（节点）转换为 NSImage。我能够在 Macaw 论坛上找到 IOS 的示例代码，但无法使其在 Cocoa 中运行。 金刚鹦鹉里有参考文献

根据 MAUI 中的滑块值动态更改图像中的水位

我正在开发一个 MAUI（Microsoft .NET 多平台应用程序 UI）应用程序，其中有一张代表一杯水的图像。我想根据...

如何将 Font Awesome IconDefinition 转换为 Kendo UI SVGIcon

Kendo UI 最近刚刚在其小部件中默认使用 SVG 图标（链接），但他们的图标选择不是很好。我想改用 FontAwesome 图标，但它们有差异...

使用变换使 SVG 可缩放

我正在尝试使用鼠标使 SVG 的一部分可拖动和缩放，但失败了。拖动有效，但缩放不起作用。我基本上从这里窃取了大部分代码。 var makeDraggable = (

SVG 中的文本元素可以完美地定位自身，尽管有固定值

我正在查看 circliful.js 的源代码，发现了以下代码行： ' 我正在查看 circliful.js 的源代码，发现了以下代码行： '<text class="timer" text-anchor="middle" x="' + textX + '" y="' + textY + '" style="font-size: ' + settings.percentageTextSize + 'px; ' + additionalCss + ';' + settings.textAdditionalCss + '" fill="' + settings.fontColor + '">0%</text>' 假设textX和textY的值分别是常数175和35，为什么当圆的宽度改变时，图标的位置保持不变？ 基本上，上面的代码行是您在this Fiddle中看到的百分比值，您在小提琴中看到的50%是上面的代码行。 所以当我有以下 CSS 时： #circli { max-width: 400px; } 尽管 175 和 35 的值恒定，但 50% 的位置仍然位于同一位置，如果我像这样更改 CSS： #circli { max-width: 200px; } 尽管 50% 和 175 具有恒定值，但 35 的位置仍然相同。为什么会这样？ SVG 中的元素是在恒定坐标系中定义的。您所做的只是更改 SVG 内部的 <div> 的大小。 SVG 会自动缩放以适合 div。 SVG 正在缩放，因为它有一个 viewBox。 viewBox 告诉渲染器 SVG 文档的限制是什么，并触发自动缩放。如果它没有 viewBox，它就不会自动调整大小。

在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...