svg 相关问题

我们可以有一个瓷砖的SVG背景，没有梯度填充？

为{background-clip：text}的工作替代方案，以实现透明文本，并在浏览器中以其他浏览器的梯度背景 我需要在Chrome vs其他浏览器中的背景-CLIP属性方面的帮助。 我想为我的网站创建一个具有动画梯度背景的徽标和标题。因为徽标和标题是两个SE ...

用于徽标的SVG具有透明的中风，我想对透明文本使用背景css-property。但是，这无效，因为将徽标文本的背景设置为白色（显然）阻止在元素下方显示梯度。

是否可以通过在html<svg>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容？

例如，要渲染持续数天的每年重复事件的各种变化的日期时间，拥有一个可重复使用的单个 svg 图像，该图像可以采用 data-datetime="yyyy-mm-dd"

使嵌套 div 内的 SVG 响应式

我有这个演示： https://codepen.io/LarryFine/pen/WbeLOPq #父母{ 位置：相对； } ＃孩子 { 位置：绝对； 宽度：320px； 高度：130像素； } 我有这个演示： https://codepen.io/LarryFine/pen/WbeLOPq #parent{ position: relative; } #child { position: absolute; width: 320px; height: 130px; } <div id="parent"> <div id="child" style="left: 0px; top: 0px; width: 320px; height: 130px;"> <svg width="320" height="130" xmlns="http://www.w3.org/2000/svg"> <rect width="320" height="130" x="0" y="0" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" /> </svg> </div> <svg width="900" height="900" xmlns="http://www.w3.org/2000/svg"> <circle cx="350" cy="350" r="300" stroke="green" stroke-width="4" fill="green"></circle> </svg> </div> 我想做的是，当浏览器窗口缩小时，SVG 图像也会相应缩放。我还需要包装 SVG 的 div。我需要 div，因为我更喜欢使用 jQuery 来拖动矩形并调整矩形的大小。将大圆圈视为楼层地图。 发生的事情是，我得到了网络浏览器的水平滚动条。 有人有办法解决这个问题吗？ 谢谢， 吉姆 使用 viewBox 并让容器决定尺寸 对于每个 SVG，添加 viewBox、width="100%" 和 height="100%"，可有效保持 SVG 宽高比并允许您独立指定整体尺寸。 容器尺寸可以通过任何标准方式受到影响；由你决定。将其放入可拖动容器中，或者使用媒体查询，等等。 SVG 将进行相应调整。 https://codepen.io/MarsAndBack/pen/bNbOomY #child, #child3 { position: absolute; } #child3 { top: 10rem; } @media (min-width: 320px) { #child3 { width: 40rem; } } <div id="parent"> <div id="child"> <svg height="100%" width="100%" viewBox="0 0 320 130" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:3;stroke:red"/> </svg> </div> <div id="child2"> <svg height="100%" width="100%" viewBox="0 0 900 900" xmlns="http://www.w3.org/2000/svg" > <circle cx="350" cy="350" r="300" stroke="green" stroke-width="4" fill="green" /> </svg> </div> <div id="child3"> <svg height="100%" width="100%" viewBox="0 0 320 130" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" style="fill:pink;stroke-width:3;stroke:red"/> </svg> </div> </div>

SVG过滤到Pixi.js

可以在Pixi.js中创建一个与以下SVG滤波器完全相同的函数的过滤器： 可以在Pixi.js中创建一个与以下SVG滤波器完全相同的函数的过滤器： <filter id="metaball"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" edgeMode="none" result="blur" /> <feColorMatrix in="blur" result="blob" values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 8 -4" /> <feMorphology in="blob" operator="dilate" radius="1" result="stroke" /> <feComposite in="stroke" in2="blob" operator="out" result="result" /> </filter> 是的。 SVG 1.1规格中有足够的信息，可以准确了解如何对这些过滤器进行编码。但是您必须在WebGL中重写它们 - 就像20倍更复杂。 作为一个示例 - 您可以在此处查看Pixi自定义过滤器的源代码： Https：//github.com/pixijs/filters/blob/main/src/src/bevel/bevel.wgsl

为什么该SVG中的图案蒙版在300个单位中切断？

从这里开始答案： 如何在使用时更改SVG模式的颜色？ 我试图在面具中使用图案。 从答案中，此代码： 从这里开始答案： 如何更改用法上的SVG图案的颜色？ 我正在尝试在口罩中使用图案。 从答案，此代码： <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="checked" width="2" height="2" stroke="white" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="2"></line> <line x1="0" y1="0" x2="2" y2="0"></line> </pattern> <mask id="checked-mask" x="0" y="0" width="1" height="1" > <rect x="0" y="0" width="1000" height="1000" fill="url(#checked)" /> </mask> </defs> <circle cx="60" cy="60" r="50" stroke="red" mask="url(#checked-mask)" fill="green" /> <circle cx="120" cy="60" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" /> </svg> 戴上绿色和洋红色圆圈，掩盖了一个人可能期望的东西。 ，以下代码（以下代码都通过200个单元调整原点并适当地移动圆，它显示了300个单元（蓝色框）的掩码停止。 （红色框是确认SVG帆布延伸超过300s） <svg width="300" height="300" viewBox="200 200 300 300" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="checked" width="2" height="2" stroke="white" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="2" /> <line x1="0" y1="0" x2="2" y2="0" /> </pattern> <mask id="checked-mask" x="0" y="0" width="1" height="1" > <rect x="0" y="0" width="100%" height="100%" fill="url(#checked)" /> </mask> </defs> <circle cx="260" cy="260" r="50" stroke="red" mask="url(#checked-mask)" fill="green" /> <circle cx="320" cy="260" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" /> <rect x='200' y='200' width='200' height='200' fill='transparent' stroke='red' /> <rect x='200' y='200' width='100' height='100' fill='transparent' stroke='blue' /> </svg> 如果我卸下面膜，然后圆圈完全绘制，所以似乎肯定会停止面具。 我很确定我不明白坐标系统如何随着事物从模式转移到面具而变化，但是我对自己的困惑感到困惑。 有些人说这是一个错误（我现在找不到参考）。我不知道，但是务实的解决方案是使用变换/翻译，而不是用于cx和cy的大值。 <svg width="300" height="300" viewBox="200 200 300 300" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="checked" width="2" height="2" stroke="white" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="2" /> <line x1="0" y1="0" x2="2" y2="0" /> </pattern> <mask id="checked-mask" x="0" y="0" width="1" height="1" > <rect x="0" y="0" width="100%" height="100%" fill="url(#checked)" /> </mask> </defs> <circle transform="translate(210 210)" cx="50" cy="50" r="50" stroke="red" mask="url(#checked-mask)" fill="green" /> <circle transform="translate(270 210)" cx="50" cy="50" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" /> <rect x='200' y='200' width='200' height='200' fill='transparent' stroke='red' /> <rect x='200' y='200' width='100' height='100' fill='transparent' stroke='blue' /> </svg>

如何创建带有路径的字母svg？

这是字母B，这是路径代码 这是字母 B，这是路径代码 <path d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z" /> 如何将字母 B 更改为字母 N ？ <svg xmlns="http://www.w3.org/2000/svg" width="261.021" height="298.536" viewBox="0 0 261.021 298.536"><g transform="translate(-238.695 -107.379)"><text transform="translate(293 324)" fill="#63ffda" font-size="200" font-family="SegoeUI-Semibold, Segoe UI" font-weight="600"><tspan x="0" y="0">N</tspan></text><path d="M435.651,850.174l126.064-68.158V637.388L437.036,563.135,310.695,632.124V776.474Z" transform="translate(-67 -450)" fill="none" stroke="#63ffda" stroke-width="10"/></g></svg> 您可以使用 Adobe XD 创建形状，然后将其导出为 SVGS。背景颜色是#0C1A2E 这是 代码笔 您可以在 <text> 中使用 <svg> 组件。然后，您只需为文本设置一些样式即可。像这样的东西： <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <title>Loader Logo</title> <g> <text id="B" x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" fill="currentColor" fontWeight="bold" fontSize="46px" > N </text> <path stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" d="M 50, 5 L 11, 27 L 11, 72 L 50, 95 L 89, 73 L 89, 28 z" /> </g> 我有类似的问题，我需要将字母 N 更改为字母 A，但具有特定的属性。 <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.7 185"> <defs> <clipPath id="letter-N"> <path d="M109.71,141.8c0,4.14-2.07,6.2-6.21,6.2h-24.47c-1.95,0-3.79-.46-5.51-1.38s-3.16-2.12-4.31-3.62l-20.68-29.3c-.23-.34-.55-.72-.95-1.12s-.89-.49-1.47-.26c-.81.34-1.21,1.21-1.21,2.59v26.89c0,4.14-2.07,6.2-6.21,6.2H8.19c-4.14,0-6.21-2.07-6.21-6.2V43.2c0-4.14,2.07-6.2,6.21-6.2h24.3c1.95,0,3.79.46,5.52,1.38,1.72.92,3.16,2.13,4.31,3.62l20.86,29.3c.23.34.54.72.95,1.12.4.4.89.49,1.47.26.8-.46,1.21-1.32,1.21-2.59v-26.89c0-4.14,2.07-6.2,6.2-6.2h30.51c4.14,0,6.21,2.07,6.21,6.2v98.6h-.02Z"/> </clipPath> </defs> <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#letter-N)" href=""></image> <path class="cover" d="M0,0v185h111.7V0H0ZM109.71,141.8c0,4.14-2.07,6.2-6.21,6.2h-24.47c-1.95,0-3.79-.46-5.51-1.38s-3.16-2.12-4.31-3.62l-20.68-29.3c-.23-.34-.55-.72-.95-1.12s-.89-.49-1.47-.26c-.81.34-1.21,1.21-1.21,2.59v26.89c0,4.14-2.07,6.2-6.21,6.2H8.19c-4.14,0-6.21-2.07-6.21-6.2V43.2c0-4.14,2.07-6.2,6.21-6.2h24.3c1.95,0,3.79.46,5.52,1.38,1.72.92,3.16,2.13,4.31,3.62l20.86,29.3c.23.34.54.72.95,1.12.4.4.89.49,1.47.26.8-.46,1.21-1.32,1.21-2.59v-26.89c0-4.14,2.07-6.2,6.2-6.2h30.51c4.14,0,6.21,2.07,6.21,6.2v98.6h-.02Z"/> <path class="outline" d="M103.51,37c4.14,0,6.21,2.07,6.21,6.2v98.59c0,4.14-2.07,6.2-6.21,6.2h-24.48c-1.95,0-3.79-.46-5.51-1.38s-3.16-2.12-4.31-3.62l-20.68-29.3c-.23-.34-.55-.72-.95-1.12-.26-.26-.55-.38-.87-.38-.19,0-.38.04-.59.12-.81.34-1.21,1.21-1.21,2.59v26.89c0,4.14-2.07,6.2-6.21,6.2H8.19c-4.14,0-6.21-2.07-6.21-6.2V43.2c0-4.14,2.07-6.2,6.21-6.2h24.3c1.95,0,3.79.46,5.52,1.38,1.72.92,3.16,2.13,4.31,3.62l20.86,29.3c.23.34.54.72.95,1.12.25.26.54.39.87.39.19,0,.39-.04.6-.13.8-.46,1.21-1.32,1.21-2.59v-26.89c0-4.14,2.07-6.2,6.2-6.2h30.5M103.51,36.25h-30.51c-4.55,0-6.95,2.4-6.95,6.95v26.89c0,1.36-.54,1.76-.78,1.91-.1.04-.19.06-.27.06-.09,0-.19-.02-.34-.16-.36-.36-.65-.7-.85-1.01l-20.88-29.33c-1.23-1.59-2.76-2.88-4.57-3.85-1.83-.97-3.8-1.47-5.87-1.47H8.19c-4.55,0-6.96,2.4-6.96,6.95v98.59c0,4.55,2.41,6.95,6.96,6.95h30.51c4.55,0,6.96-2.4,6.96-6.95v-26.89c0-1.57.56-1.82.75-1.9.1-.04.21-.06.3-.06s.2.02.35.17c.36.37.65.71.85,1.01l20.69,29.32c1.23,1.6,2.76,2.88,4.57,3.85,1.82.97,3.79,1.47,5.87,1.47h24.48c4.55,0,6.96-2.4,6.96-6.95V43.2c-.02-4.55-2.42-6.95-6.97-6.95h0Z"/> </svg> 我做不好，错过了课程封面和大纲。 字母A字母N

如何在调整容器大小时准确地重新绘制 SVG？

我正在尝试在网站上以 SVG 形式绘制图形。 我使用 d3 和 React 来绘制图形。 这在将 SVG 定义为 React 组件方面非常有效，但我...

为什么从Figma SVG文件导出看起来不一样？

在 Figma 中，这个按钮有精美的圆形边框。如果导出为 PNG，它看起来完全一样。当导出为 svg 时，即使缩放（SVG 文件），这些圆形边框看起来也会被切碎。

Svelte SVG 绘制画布在构建后显示损坏的图像

我正在使用 Svelte，我尝试将 SVG 转换为图像。 SVG 已经渲染，但中心的徽标尚未渲染。我使用 canvas 来获取 SVG 图像并在中心绘制徽标。正如你所看到的，一切都是......

如何获取 SVG 旋转后的实际边界？

我需要在其父图像应用 CSS 旋转后获取 SVG 图像的实际边界位置。下图中的灰色表示其父元素（在我的例子中是

如何使用通用 JavaScript 函数从 HTML <object> 获取 CSS 属性值

编辑： 我现在已经尝试过这个： var 谷歌，finalObject； 函数 getpositionx() { 谷歌 = document.getElementById('谷歌'); FinalObject = window.getCompulatedStyle(google); 返回

SVG 水平花括号

我正在尝试创建一个从键盘字符开始的宽水平花括号并对其进行转换。 我开始于： } 我正在尝试创建一个从键盘字符开始的宽水平花括号并对其进行转换。 我开始于： <text x="40" y="120" transform="rotate(90, 40, 120)">}</text> 现在我想拉伸文本以使其更宽。 忘记使用 CSS font-size 元素，字体粗细的大小也会相应改变，产生一个胖符号。 我想通过保持瘦身来拉伸角色。 然后我开始使用 symbol 和 use 组合，尝试利用 viewbox 功能 这是我最后尝试的： <symbol id="curly-bracket"> <text>}</text> </symbol> <use x="40" y="120" transform="rotate(90, 40, 120)" xlink:href="#curly-bracket" /> 角色现在看起来被剪切了，我找不到办法让它正确显示。 我很难理解我在做什么，正在阅读 W3 SVG 文档。 <text x="40" y="120" transform="rotate(90, 40, 120) scale(1,2)">}</text> 这将使所有 y 坐标加倍，并且由于您已将其旋转 90 度，因此将水平拉伸它。 尝试从 W3 规范学习 SVG 会让您感到沮丧和困惑。它不是作为如何使用它的教程编写的。 这里有关于 SVG 转换的丰富资源。如果您确实对 SVG 感兴趣，我建议您阅读整本电子书。我认为这是最好的资源。 另一个好的解决方案是简单地创建自己的大括号： <path d="m0 0 c0 5 5 5 5 5h20s5 0 5 5 c0-5 5-5 5-5h20s5 0 5-5" style="stroke: #000; fill: none;" /> 只需用 40 代替 20 即可使支架长度几乎加倍，用 10 代替 5 即可使支架的垂直尺寸加倍。 我发现 SirCxyrtyx 的答案引起了各种各样的问题（特别是如果你设置了基本文本样式）并且看起来在视觉上有点令人不快。

解析类似于矢量可绘制的路径并创建路径对象来复制相同的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 中应用样式。 当我右键单击浏览器时，我可以选择“保存图像”。此操作将图像保存为渲染后的图像...