svg 相关问题

解析类似于矢量可绘制的路径并创建路径对象来复制相同的android

我想使用android路径动态绘制视图。我可以使用 addRect、addOvel 等创建基本形状。但我想通过解析 xml 矢量可绘制字符串中的路径来添加复杂路径。 我想使用 android path 动态绘制视图。我可以使用 addRect、addOvel 等创建基本形状。但我想通过解析 xml 矢量可绘制字符串中的路径来添加复杂路径。 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="108dp" android:height="108dp" android:viewportWidth="108" android:viewportHeight="108"> <path android:fillColor="#FF000000" android:pathData="M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z"/> </vector> 我想简单地使用此路径数据M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z并将其添加到我的代码中的path，最好调整大小以适合矩形。 即使是正确方向的提示也会对我很有帮助。谢谢你。 您可以通过 PathParser 来实现这一点。 val pathData = "M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z" val path = PathParser().parsePathString(pathData).toPath()

如何使用 svg/canvas 绘制不规则/手绘线？

我想绘制一条可调整大小的垂直线（基于页面内容），但这似乎是手绘的，而不是直线。 我目前正在考虑使用 SVG 或 Canvas 来实现这个...

使用 CSS / SVG 动画（绘制）一条波浪线

好吧，我想做一个线条动画，如下所示： 我希望能够对线条进行动画处理，使其从左上角出现，然后在右下角结束。 根据研究...

为什么在通过 HTML 文档使用 SVG 内部的外部样式表时会出现问题？

问：有人可以提供 HTML5 官方规范的链接，该规范明确禁止/禁止在 SVG 文档中使用外部样式表，如下所示： （换句话说，我是“

是否可以使用纯CSS创建这个形状？

我几天来一直在尝试用 CSS 创建这个，但似乎不可能。我得到的最好的一个是 2 个方块和一个直连接器。真的可以使用 CSS 创建这个形状吗？ 我也有...

如何在变换 <g> 组时保持 SVG 渐变相对于屏幕固定？

我有一个包含多个形状的 SVG 组，这些形状使用由 定义的渐变 我有一个包含多个形状的 SVG 组，这些形状使用 <g fill="url(#myGradient)"... 定义的渐变。我想对组应用变换（例如缩放、旋转、平移），但我需要渐变相对于屏幕（视口）保持固定。 目前，当我对组应用变换时，渐变也会受到影响，即使我使用了gradientUnits =“userSpaceOnUse”。如何确保渐变保持固定不动，并且不会随着变换后的组移动或旋转？ <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0%" stop-color="red"></stop> <stop offset="100%" stop-color="blue"></stop> </linearGradient> </defs> <g fill="url(#myGradient)" transform="translate(200, 200) rotate(0)"> <rect x="0" y="0" width="300" height="80"></rect> <rect x="0" y="100" width="300" height="80"></rect> </g> </svg> 与 rotate(0) -> 渐变的蓝色位于右侧 rotate(90) -> 渐变的蓝色位于底部 我应该进行哪些调整以确保渐变相对于屏幕保持固定并且不会随组一起变换？ 在 <mask> 元素中移动要使用渐变渲染的形状。将渐变应用到填充整个画布的矩形，然后通过应用蒙版剪出形状。 <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0%" stop-color="red"></stop> <stop offset="100%" stop-color="blue"></stop> </linearGradient> <mask id="shapes" fill="white"> <g transform="translate(200, 200) rotate(90)"> <rect x="0" y="0" width="300" height="80"></rect> <rect x="0" y="100" width="300" height="80"></rect> </g> </mask> </defs> <rect width="100%" height="100%" fill="url(#myGradient)" mask="url(#shapes)"> </rect> </svg>

javascript：将 <svg> 元素保存到磁盘上的文件

在我的 HTML 上我有一个 SVG 元素。 它使用 d3js 渲染并在 CSS 中应用样式。 当我右键单击浏览器时，我可以选择“保存图像”。此操作将图像保存为渲染后的图像...

如何用svg实现illustrator识别闭合路径的能力

我正在制作一个网站，帮助制作库法版式艺术。 Kufi 基本上是基于网格的。它因网格的构建方式而异。 正方格子 圆形格子 以前，我曾经做过

使用 D3.js（IE、safari 和 chrome）创建 SVG 后如何保存/导出 SVG 文件？

我目前有一个使用 D3 的网站，我希望用户可以选择将 SVG 保存为 SVG 文件。我使用 crowbar.js 来执行此操作，但它仅适用于 chrome。 Safari 没有发生任何事情...

动态导入的 SVG 图标不起作用

我正在使用 svelte 5 / sveltekit 2 我有一个简单的示例，我从如下所示的 API 获取数据 const itemsFromAPI = [ { id: 1, 符号: ['btc', 'eth'] }, { ID：2，

这是 SVG Chrome 渲染错误吗？

自从最新的 Chrome 版本以来，我的网站中的 SVG 元素开始出现问题。 SVG 似乎无法在某些屏幕尺寸下正确缩放，并且当我调整窗口大小时会闪烁。在我的

SVG：拉伸图像

我正在研究 SVG 教程，我只是加载了这样的图像： 我正在研究 SVG 教程，我只是加载了这样的图像： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg style="stroke-linejoin:round; stroke:black; stroke-width:0.5pt; text-anchor:middle; fill:none" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica, Arial, FreeSans, Sans, sans, sans-serif" height="400px" width="400px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250"> <rect y="0" x="0" height="250" width="250" stroke="black" stroke-width="1" fill="blue" /> <image y="0" x="0" height="250" width="250" xlink:href="http://www.blueprintmodel.co.uk/images/DSCF1438.jpg" /> </svg> 即使高度和宽度相同，我也会在 viewBox 的中心、“矩形”上方获得图像。 我的问题是： 如何将图像拉伸为矩形大小？ 为什么“图像”标签中的“高度”不起作用？ 有我可以使用的“拉伸”或“调整大小”等转换吗？（我找不到它们） 在 SVG 元素上设置 preserveAspectRatio="none"： <svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" > 还可以使用纯 CSS 来缩放和更改 SVG 的纵横比： transform: scale(x, y); 使用 SVG 图像时，请了解如何操作 preserveAspectRatio 有效 - 有了它，您可以使 SVG 图像以您喜欢的任何方式响应！ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio 回答您的问题： 如何将图像拉伸为矩形大小？ <image viewBox="0 0 250 250" preserveAspectRatio="none" … /> 为什么“图像”标签中的“高度”不起作用？ 我不知道图像出了什么问题，因为原始图像已经消失了。无论如何，对于 SVG，您应该专注于使用 viewBox 而不是宽度和高度。您知道，该名称包含“可扩展”一词，并且使用宽度和高度可以防止这种情况...... 我可以使用“拉伸”或“调整大小”等转换吗？ 居中且包含： <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet" … 居中并覆盖： <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice" … PS。您需要了解的有关缩放 SVG 图像中的陷阱的所有内容（但请忘记 IE，并且不要使用 padding-bottom hacks）：https://css-tricks.com/scale-svg/ 我这样做是为了拉伸图像以填充父 SVG，效果很好。 <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px" x="100" y="100" style="visibility: visible; opacity: 1;"> <image href="my_image" preserveAspectRatio="none" width="100%" height="100%"></image> </svg>

如何禁用 svg 预览

在此输入图像描述 我不知道我遇到了什么，但我没有安装任何扩展，我的 svgs 开始作为常规文件打开，我不需要，我需要 html 标记。 我不知道...

将 SVG 路径数据转换为 0-1 范围，以用作 objectBoundingBox 的剪辑路径

我使用从 Illustrator 导出的相当复杂的 SVG 形状作为剪切路径。 问题是objectBoundingBox要求路径数据在0-1范围内，而我的路径包含路径d...

使用具有不同种子或偏移量的相同 SVG 过滤器

在我的html页面中，我有一个像这样的SVG过滤器： 在我的 html 页面中，我有一个像这样的 SVG 过滤器： <filter id="displacementFilter" height="180%" width="180%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G" /> </filter> 为了使过滤后的元素看起来不同，我想对 <feTurbulence> 标签使用具有不同种子或偏移量的相同过滤器。我不想多次重复过滤器，因为这会显着增加页面的大小，并且使用过滤器的元素数量在页面之间是可变的。有解决办法吗？ 使用本机 Web 组件，现已支持近十年。 shadowDOM 确保您不会遇到重复 ID 的麻烦。 <b>Who is afraid of Red, Yellow and Blue?</b><br> <svg-splash frequency="0.05"></svg-splash> <svg-splash frequency="0.1" color="yellow"></svg-splash> <svg-splash frequency="0.5" color="blue"></svg-splash> <script> customElements.define('svg-splash', class extends HTMLElement { connectedCallback() { let color = this.getAttribute('color') || 'red'; let frequency = this.getAttribute('frequency') || 0.05; this.attachShadow({ mode: 'open' }).innerHTML = ` <svg style="background:grey" width="100" height="100" viewBox="0 0 120 120"> <filter id="displacementFilter" height="180%" width="180%"> <feTurbulence type="turbulence" baseFrequency="${frequency}" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G" /> </filter> <circle cx="50" cy="50" r="40" fill="${color}" filter="url(#displacementFilter)" /> </svg>`; } }); </script>

使用 CSS 旋转 SVG 路径

我有这个SVG： * { 背景：#e1e1e1； } 我有这个SVG： * { background: #e1e1e1; } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 如何旋转180度？！ 演示 只需使用元素类型选择器并向其添加 transform: rotate(180deg) 属性，如下面的代码片段所示。 * { background: #e1e1e1; } svg { transform: rotate(180deg); } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 或者，如果您只想旋转 path 而不是 svg 本身，请包含 transform-origin，如下面的代码片段所示： * { background: #e1e1e1; } path { transform: rotate(180deg); transform-origin: 50% 50%; } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 内联你会这样做： x 轴翻转：transform="scale(-1 1)" y 轴翻转：transform="scale(1 -1)" 例如。在你的例子中： <svg class="decor" transform="scale(-1 1)" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 您还可以直接通过 SVG 本身的 transform 旋转 SVG 的路径。 <svg xmlns="http://www.w3.org/2000/svg" transform="rotate(90 50 50)" viewBox="0 0 100 100" width="100" height="100"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 您还可以使用 style 属性旋转 180 度，如下所示： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-node-id="a0cef7b2-6c8c-458d-8b52-0c8b80c65008" data-comp-instance-id="8450d308-bfd8-4e2e-b3b9-a875c5a54700" data-type="icon" style="transform: rotate(180deg)"> <path d="M342 214l468 298-468 298v-596z" data-node-id="a3145c10-0a28-4d2c-8b7b-8331bc1905c7" data-comp-instance-id="8450d308-bfd8-4e2e-b3b9-a875c5a54700" data-type="path" class=""></path> </svg> 这将显示一个指向左侧的三角形。 * { background: #e1e1e1; } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>

使用 <image> 标签在 SVG 图像上叠加文本

生成文本，但我无法让文本显示在 SVG 图像上。它位于图像下方。 我尝试将文本行移到图像后面，并将图像行移出 . 我还补充了...

SVG 路径，描边宽度不一致。怎么让它统一

我正在使用 SVG 路径创建加载屏幕。有一条灰色路径代表未加载的条形图，一条白色路径代表加载的百分比。 document.addEventListener("DOMContentL...

Vite项目中的图片和文件什么时候使用公共资源和资产？

我正在开发一个 Vite 项目，我很难理解每个文件夹之间的区别以及何时为我的每个资产使用它们。 来自 Vite Docs 关于 public 的信息： 如果您拥有以下资产： ...

BeautifulSoup 美化改变内容，而不仅仅是布局

我有一个 SVG 图像，它是一个 XML 文件。 如果我用 BeautifulSoup 解析它并未经修改地输出它，那么当我使用 prettify 时它会修改它。图像呈现不同的效果。文字向左移动...