svg 相关问题

如何在 svg 路径上添加文本？

#美国地图{ 显示：块； 位置：绝对； 顶部：0； 左：0； 宽度：100%； 高度：100%； } 路径：悬停{ 中风：#ffffff！重要； 笔画宽度...

缩小 SVG 时颜色会褪色

我一直在使用纯Javascript、HTML、CSS 编写一些数学可视化。我正在研究斐波那契二进制字分形（请参阅工作示例）。为了能够看到不断成长的影像...

如何判断一个多边形是否在另一个多边形内部？

我有一个简单的示例（SVG 源），如下所示。 d 属性中描述的 id 为“rect2816”的路径： 米 140.53571,188.625 0,148.1875 273.9375,0 0,-148.1875 -273.9375,0 米 132....

垂直排列 SVG 和 div 元素之间的间距问题

我尝试在容器内垂直排列 SVG 和 div 元素，但在它们之间遇到意外的间距问题。我似乎无法弄清楚这个间距是从哪里来的......

SVG 中带孔的多边形

我很难理解如何在 svg 文件的多边形中生成孔。 这是一个例子： 我很难理解如何在 svg 文件的多边形中生成孔。 这是一个例子： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%" viewBox="2.529975092957109 41.346880553423844 23.168975806780242 22.134355770447257" stroke-width="0.00250"> <defs> </defs> <polygon fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" points="12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749" /> <polygon fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" points="14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626" /> <polygon fill="red" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" points="14.492,52.433 14.492,52.261 14.906,52.261 14.906,52.433 14.492,52.433" /> </svg> 我需要在这里更改什么才能使多边形彼此相交？ 非常感谢！ 1. 我正在将多音转换为路径。为此，我将 points 属性更改为 d 属性。另外，我在值字符串的开头添加了 M 命令。这已经足够了，尽管我会为线条添加 L 命令。 2. 我连接了两条路径的 d 属性。在这种情况下，它将创建一个洞，因为路径的第二部分（在第二个 M 命令之后）是沿相反方向绘制的（一个矩形顺时针绘制，另一个逆时针绘制）。在其他情况下，您可能需要添加 fill-rule="evenodd" 到路径。 请阅读fill-rule属性 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%" viewBox="12 52 3 3" stroke-width="0.00250"> <path fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" d="M12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749 M14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626"/> </svg>

无法使用 Batik 来将 WMF 转换为 SVG 转换器

我必须将 WMF 图像转换为 SVG 图像。 我使用蜡染并得到了这个代码，但它不起作用。运行代码后，会创建一个 SVG 图像文件，但它是完全空的文件。我不知道为什么。 ...

react-native-svg 中的 LinearGradient 不起作用

我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码： 我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码： <Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}> <Defs> <ClipPath id="a"> <Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/> </ClipPath> <LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox"> <Stop offset="0" stopColor="rgb(76,209,149)" /> <Stop offset="1" stopColor="rgb(170,221,100)" /> </LinearGradient> </Defs> <G class="b" transform="translate(0 -160)"> <Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)" fill='url(#b)' /> </G> </Svg> 我得到的输出是： 我认为@enxaneta是对的，clip-path似乎不存在于react-native-svg请参阅文档，您可以在此处的文档中找到react-native-svg #LinearGradient 我认为你应该这样引用它： <Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/> 其中 fill 应引用您的渐变 id，即 fill=url(#b) 我使用<Path>实现了以下结果 注意：我通过使用两个相互重叠的形状来实现这一点： 使用 react-native-linear-gradient 实现背景渐变的组件 以及来自 react-native-linear-gradient 的 LinearGradient 请参考以下代码。 上面例子的代码 import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'; import Gradient from 'react-native-linear-gradient' const { width, height } = Dimensions.get('window') <Gradient style={{height: height * .25,}} colors={ ['#FFD080', 'red'] } start={{ x: 0, y: 0}} end={{ x:1, y: 1}} locations={[0.18, 1, 1]}> <Svg height={height * .44} width={width} viewBox="0 0 1440 320" style={{ position: 'relative', top: height * .069 }} > <Defs> <LinearGradient id="path" x1="0" y1="0" x2="1" y2="1"> <Stop offset="0" stopColor="#FFD080" stopOpacity="1" /> <Stop offset="1" stopColor="red" stopOpacity="1" /> </LinearGradient> </Defs> <Path fill="url(#path)" d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/> </Svg> </Gradient> 我找到了一个解决方案，我不使用具有渐变的 svgs，而是将 SVG 转换为 Lottie 文件。效果很好，作为额外的优势，我们可以将 SVG 转换为简单的动画:) 效果很好： import React from "react"; import { View, Text } from "react-native"; import { Polygon, Svg, LinearGradient, Stop, Defs, G, Use,} from "react-native-svg"; const Triangle = () => { return ( <Svg viewBox="0 0 386 386"> <Defs> <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0"> <Stop offset="0" stopColor="#000" stopOpacity="0.2" /> <Stop offset="1" stopColor="#71D4EB" stopOpacity="0.1" /> </LinearGradient> <G id="polygon"> <Polygon points={"193,193 0,386 0,0"} fill="url(#grad)" strokeWidth={0} /> </G> </Defs> <Use href="#polygon" x="0" y="0" /> <Use href="#polygon" x="0" y="0" rotation="180" origin="193, 193" /> <Use href="#polygon" x="0" y="0" rotation="90" origin="193, 193" /> <Use href="#polygon" x="0" y="0" rotation="270" origin="193, 193" /> </Svg> ); }; export default Triangle;

svg 和其他元素之间的白线

我有非常简单的 svg，只有一种颜色和三个多边形点。 在 Chrome 中，某些宽度的 svg 之前有一条不应该存在的白线： 顶部有一个具有相同 c 的 div...

当连接中心的线更新时计算新的矩形中心

这是一个 SVG 应用程序。我有一条具有 centerPoint、startPoint、endPoint 和 angle 属性的线。我有一个具有中心点、宽度和高度的矩形。由此我可以计算出四个

Selenium：如何使用 C# 在 Chrome 中拖放

下面的代码可以在 Firefox 中运行，但不能在 Chrome 中运行。从我在网上找到的信息来看，Actions.DragAndDrop 似乎不适用于 Chrome。我正在尝试移动 SVG 元素。 有没有替代方案...

计算svg圆形图表上每条路径的旋转角度

https://jsfiddle.net/p4d57e8x/3/ const getArcPath = (开始, 结束, 内半径, 外半径) => { const startAngle = 开始 * Math.PI * 2; const endAngle = 结束 * Math.PI * 2; 常量 x1 =

如何更改/删除WinUI 3中的窗口标题栏图标

是否可以更改Windows 10中的Windows标题栏图标。 我已经尝试过这些文档，但他们并没有真正提供任何帮助来完成它。它说只能在 Windows 11 中完成？？？

使用 SVG 模板注入动态组件

是否可以注入作为子 svg 元素的动态组件？ 例如，我有一个主要组件 (CanvasComponent) ，它的模板是这样的 是否可以注入作为子 svg 元素的动态组件？ 比如我有一个主组件（CanvasComponent），它的模板是这样的 <svg width="400" height="400"> <ng-template appCanvasAnchor></ng-template> </svg> ng-template 是用于动态注入组件的锚点https://angular.io/guide/dynamic-component-loader 动态（SquareComponent）已经有了这个模板 <svg:rect width="100" height="100" style="fill:red" /> 现在，由于动态组件添加到 DOM 的方式，当我的 Square 组件添加到 DOM 时，它将被包含在 div 元素中，如下所示。 <svg width="400" height="400"> <div app-square> <rect width="100" height="100" style="fill:red" /> </div> </svg> 理论上，一切都工作得很好，除了这是 SVG，因此我的方块不会渲染，因为它有未知的标记（div）。这里的问题是，我可以以某种方式改变注入器使用的元素，以便它不使用 div，而是使用 svg 知道像 g 这样的元素吗？ 不确定模板，但可以在一些解决方法的帮助下通过内容投影动态注入 svg-s。 主要的解决方法是找到一种方法来删除组件的宿主元素，这可以通过创建如下指令来处理，该指令将处理某些元素的“展开”。如下所示，该指令执行类似于 js 中的展开运算符的操作，它获取其所附加的元素的所有子元素并将它们展开到父元素的级别 @Directive({ selector: '[appRemoveHost]', standalone: true, }) export class RemoveHostDirective { constructor(private el: ElementRef) {} //wait for the component to render completely ngOnInit() { var nativeElement: HTMLElement = this.el.nativeElement, parentElement: HTMLElement = nativeElement.parentElement; // move all children out of the element while (nativeElement.firstChild) { parentElement.insertBefore(nativeElement.firstChild, nativeElement); } // remove the empty element(the host) parentElement.removeChild(nativeElement); } } 感谢这个问题和答案删除由角度组件创建的主机 HTML 元素选择器 之后，您只需为要使用的 SVG 元素创建包装器组件即可。 示例画布组件看起来像这样 @Component({ selector: 'app-canvas', template: `<svg width="400" height="400"> <ng-content></ng-content> </svg>`, standalone: true, imports: [CommonModule], }) export class CanvasComponent {} 自定义 SVG 元素可以如下所示 @Component({ selector: 'app-custom-rect,[app-custom-rect]', template: `<svg appRemoveHost> <rect [attr.x]="x" [attr.y]="y" [attr.width]="width" [attr.height]="height" style="{{ style }}" /> </svg>`, standalone: true, imports: [CommonModule, RemoveHostDirective], }) export class CustomRectComponent { @Input() style = ''; @Input() x = ''; @Input() y = ''; @Input() width = ''; @Input() height = ''; } 这里值得一提的是，否则我们需要创建 svg 包装元素 Only void and foreign elements can be self-closed "rect" 作为 rect 元素只能存在于 svg-s 中。 正如此处所示，我们正在使用 appRemoveHost，这要归功于当我们的组件被渲染时， 包装器将被删除。 最后，在我们想要使用画布的地方，我们应该执行以下操作 <app-canvas> <app-custom-rect appRemoveHost [y]="'50'" [x]="'0'" [width]="'100'" [height]="'100'" [style]="'fill:red'" ></app-custom-rect> <app-canvas/> 这里我们再次需要使用 appRemoveHost 指令来删除 rect 组件的剩余包装。 在这里您可以找到工作 Stackblitz 是否可以注入作为子 svg 元素的动态组件？ 是的，当然。 Angular 已经支持这一点好几年了，但我不确定我是否已经看到了这一点的详细记录。 当你创建 Angular 组件时，你的选择器可以是很多东西。它不一定是一个标签。我们将利用这一点来使用属性。 首先，让我们构建托管 SVG 的主要组件： import { Component } from '@angular/core'; @Component({ selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.css'], }) export class MainComponent {} 和 HTML： <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg:g house></svg:g> </svg> 正如您可能已经猜到的，诀窍就在这里：<svg:g house></svg:g>。我们创建一个组，它不会渲染任何内容。但我们给它添加了一个属性house。 然后要在那里“注入”组件，我们可以让组件选择器以带有组的 svg 标签和 house 属性为目标： import { Component } from '@angular/core'; @Component({ selector: 'svg:g[house]', templateUrl: './house.component.html', styleUrls: ['./house.component.css'], }) export class HouseComponent {} 最后一块拼图几乎就是 SVG：要注入的部分 <svg:polygon points="25,10 40,30 10,30" style="fill:rgb(0,0,255);" /> <svg:rect width="30" height="30" x="10" y="30" style="fill:rgb(0,0,255);" /> 如果我们查看渲染的 HTML： <app-main _ngcontent-rcx-c227="" _nghost-rcx-c226="" ><svg _ngcontent-rcx-c226="" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > <g _ngcontent-rcx-c226="" house="" _nghost-rcx-c217=""> <polygon _ngcontent-rcx-c217="" points="25,10 40,30 10,30" style="fill: rgb(0,0,255);" ></polygon> <rect _ngcontent-rcx-c217="" width="30" height="30" x="10" y="30" style="fill: rgb(0,0,255);" ></rect> </g></svg ></app-main> 没有我们内部组件的任何痕迹。当然，您可以根据需要拥有任意数量和嵌套的数量。您还可以通过将数据作为输入传递来参数化它们，就像使用任何其他组件或注入服务一样。 这是 Stackblitz 上的 现场演示。 jscw 使用本机 JavaScript Web 组件可能会更容易 <svg-floorplan> 处理其innerHTML 并在shadowDOM中生成<SVG> 基于 HTMLUnknownElements <room>（打造出色的语义 HTML） 它声明了正确的 SVG 的 x,y,width,height,fill 属性 <rect> 基于 <rect> 标签可以定位在中间 innerHTML 中任何剩余的 SVG 元素都被移动到新的<SVG> 您的 JavaScript 技能可以增加更多... <svg-floorplan viewBox="0 0 300 100"> <style>text{fill:gold}</style> <room rect="0 0 200 50">living</room> <room rect="200 0 100 100 blue">kitchen</room> <room rect="0 50 100 50">bedroom</room> <room rect="100 50 100 50 green">bathroom</room> <circle fill="red" cx="25" cy="25" r="10"></circle> </svg-floorplan> 创造： <svg-floorplan viewBox="0 0 300 100"> <style>text{fill:gold}</style> <room rect="0 0 200 50">living</room> <room rect="200 0 100 100 blue">kitchen</room> <room rect="0 50 100 50">bedroom</room> <room rect="100 50 100 50 green">bathroom</room> <circle fill="red" cx="25" cy="25" r="10"></circle> </svg-floorplan> <script> customElements.define("svg-floorplan", class extends HTMLElement { connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed let svg = `<svg viewBox="${this.getAttribute("viewBox")}">`; svg += `<rect x="0" y="0" width="100%" height="100%" fill="grey"/>`; this.querySelectorAll('room[rect]').forEach(rm => { let [x, y, width, height, fill="grey"] = rm.getAttribute("rect").split(" "); svg += `<rect x="${x}" y="${y}" width="${width}" height="${height}" stroke="black" fill="${fill}"/>`; let label = rm.innerHTML; svg += `<path id="${label}" pathLength="100" d="M${x} ${~~y+height/2}h${width}" stroke="none"></path> <text><textPath href="#${label}" startoffset="50" dominant-baseline="middle" text-anchor="middle">${label}</textPath></text>`; rm.remove(); }); svg += `</svg>`; this.attachShadow({mode:"open"}).innerHTML = svg; this.shadowRoot.querySelector("svg") .insertAdjacentHTML("beforeend",this.innerHTML) }) } }) </script> 文档可能会帮助您： 您可以在 Angular 应用程序中使用 SVG 文件作为模板。当您使用 SVG 作为模板时，您可以像使用 HTML 模板一样使用指令和绑定。使用这些功能动态生成交互式图形。 我建议你创建一个可以以 Angular 方式控制的 SVG 组件，对于动态模板显示，你可以做的是： <div class="container" *appCanvasAnchor> </div> .container { width: 400px; height: 400px; svg { width: 100%; height: 100%; } }

如何在nextjs中导入SVG

我正在将我的 React 网站迁移到 nextjs。我的根目录下有一个 asset 文件夹，其中包含大量 svgs，还有一个 Constants.js 文件，我将所有 SVG 作为 ReactComponent 导入其中。我...

更改样式表内由 data-URL 加载的 SVG 图像的填充颜色

我想要通过 url('data...') 属性将不同颜色的图像加载到样式表内。所有图像都嵌入在 css 文件中。唯一的区别是填充颜色

SVG 图标包含在页面中时看起来有所不同

我想在我的页面中显示这个svg（这是一个下载链接）。我这样做： 但这是结果： 我的中心周围有那些丑陋的线条...

Convert animateTransform SVG 的转换为动画 .gif 图像

tl;dr 是否可以将 SVG 转换“转换”为动画 GIF 图像？ 我有这个简单的加载程序，一个动画齿轮，它使用 animateTransform 转换来“实现......

SVG 平移缩放：单击 SVG 内部的中心组到视口

我正在使用这个 SVG Pan Zoom 库：https://github.com/bumbu/svg-pan-zoom 我为你准备了一个CodePen：https://codepen.io/ItsBenedict/pen/vYMbjpK 如果您单击一个类别，该组应该...

SVG+JavaScript，如何查找<use>引用是否存在

我有一个像这样的SVG文件 使用 JavaScrip...

SVG 中的下标和上标

我正在尝试使用此站点中的以下代码使用 SVG 显示下标和上标 我正在尝试使用以下代码来显示 SVG 的下标和上标 来自此站点 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g> <text x = "10" y = "25" font-size = "20"> <tspan> e = mc <tspan baseline-shift = "super">2</tspan> </tspan> <tspan x = "10" y = "60"> T <tspan baseline-shift = "sub">i+2</tspan> =T <tspan baseline-shift = "sub">i</tspan> + T <tspan baseline-shift = "sub">i+1</tspan> </tspan> </text> </g> 但下标/上标在 IE 或 Firefox 中不显示。这是未实现还是还有其他问题？ [你能看到下标正常显示吗？] IE9、IE10 和 Firefox 不支持基线偏移，请参阅： http://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx https://bugzilla.mozilla.org/show_bug.cgi?id=308338 如果您确实尝试显示公式，更适合的方法是将 MathML 嵌入到 SVG 中，请参阅： https://developer.mozilla.org/en-US/docs/Web/MathML 如果您想要快速修复您提供的示例，您可以使用 dy... 模拟基线偏移 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g> <text x = "10" y = "25" font-size = "20"> <tspan> e = mc <tspan dy ="-10">2</tspan> </tspan> <tspan x = "10" y = "60"> T <tspan dy="10">i+2</tspan> <tspan dy="-10">=T </tspan> <tspan dy="10">i</tspan> <tspan dy="-10">+ T</tspan> <tspan dy="10">i+1</tspan> </tspan> </text> </g> </svg> http://jsfiddle.net/UQ5Dp/