程序员经验分享-hwhale

svg 中的简单填充图案：对角线阴影

2024-04-23

我如何填充 SVG 形状，不是使用单一颜色、图像或渐变，而是使用阴影图案（如果可能的话对角线）。

已经两个小时了，我什么也没发现（至少在2005年之后）。

我认为一个可能的破解方法是使用孵化的 PNG 作为填充，但这并不理想。


我在互联网上也没有找到任何有关对角线孵化的内容，所以我将在这里分享我的解决方案：

<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
  <path d="M-1,1 l2,-2
           M0,4 l4,-4
           M3,5 l2,-2" 
        style="stroke:black; stroke-width:1" />
</pattern>

（注意路径表达式中的小写“l”）

上面创建了一个阴影线，其对角线从左下角到右上角，间隔 4 个像素。除了对角线（M0,4 l4,-4）您还必须描边图案区域的左上边缘和右下边缘，因为否则由于在与正方形边缘相交的地方进行剪裁，线条将被“收缩”。

要使用此图案填充矩形，请执行以下操作：

<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SVG

svg 中的简单填充图案：对角线阴影 的相关文章

  • Django 开发服务器可以正确提供 SVG 服务吗？

    我正在尝试使用以下方法提供 svg 地图 在 Firefox 中 这会导致插件提示 如果我重命名地图 svg to map xml它正确显示图像 我认为这是因为 Django 的开发服务器 具体来说django views static s

  • d3.event 在去抖动函数内为 null

    当尝试使用 mousemove 事件处理程序的去抖版本时 d3 event is null 我想使用d3 mouse此去抖动处理程序中的对象 但是d3 event返回 null 并抛出错误 我怎样才能访问d3 event在下面的代码中 a

  • 如何在我的网站上填充/描边 SVG 文件？

    我用 Google 搜索了这个问题大约 30 分钟 很惊讶没有人问过 所以也许这是不可能的 我使用这一行嵌入我在 AI 中制作的 SVG 文件 请注意 当我保存 SVG 时 路径上没有填充或描边 Your browser does not

  • QML 不显示 svg 图像

    我编写了一个简单的 QML ui 它使用一些 svg 图像 当我在桌面上执行该应用程序时 一切都很好 显示了 UI 以及上面的 svg 图像 当我尝试在嵌入式设备 运行嵌入式 Windows 上执行应用程序时 会出现问题 在这种情况下 会显

  • 如何在 SVG 中制作不同大小的内嵌文本？

    在 HTML 中为不同的单词创建具有不同字体大小的文本非常容易 但是关于

  • 使用 D3.js SVG 进行 2D 多边形布尔运算

    我有 2 个使用 D3 js 创建的简单面积图 数据和代码如下 让我们称它们为Graph A Graph B 我想用它们根据它们的相交方式创建 3 个新路径 多边形 Path 1 Graph A Graph B Path 2 Graph B

  • jQuery 中的 attr() 是否强制小写？

    我正在尝试操作 svg viewBox 属性 它看起来像这样

  • SVG 路径超出 d3 画笔上的图表区域

    当我尝试刷动和缩放折线图的一部分时 所选区域的某些部分会呈现在图表之外 代码和行为再现可以在以下位置找到这个jsbin https jsbin com jamojonaqu edit js output 单击并拖动以选择一部分并放大 双击以

  • Angular svg 或 canvas 使用颜色渐变

    我正在使用 Angular 和 d3 创建一个甜甜圈 在指令中 我可以非常简单地给填充区域指定颜色 在这个 plunker 中它是蓝色 但我想做的是让 SVG 平滑地改变其颜色 0 33 3 red 33 4 66 66 orange 66

  • svg 中的简单填充图案：对角线阴影

    我如何填充 SVG 形状 不是使用单一颜色 图像或渐变 而是使用阴影图案 如果可能的话对角线 已经两个小时了 我什么也没发现 至少在2005年之后 我认为一个可能的破解方法是使用孵化的 PNG 作为填充 但这并不理想 我在互联网上也没有找到

  • 使用“”元素为 SVG 生成 IMG src 数据 URI

    是否存在安全原因阻止

  • 将 D3 svg 保存为高质量图像

    有没有办法将 D3 SVG 图像保存为高质量图像 如果是的话请解释一下 截至目前 我正在使用以下代码将 svg 保存为图像 但我得到的图像质量不高 var canvas1 document createElement canvas canv

  • 按位置获取元素？

    我正在研究 SVG 脚本 有 getElementById 或 getElementsByTagName 但我找不到任何方法来按位置获取元素 比如获取位置为x 10 y 10的元素 有什么办法可以实现这个目标吗 var yourElemen

  • 每 x 秒对 SVG 元素进行动画处理

    介绍 我了解一些基本的动画技术SVG两者同时使用Javascript和 DOM

  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var

  • 在视图内调整 SVG 图像的大小

    我有一个 FloatingActionButton 其 SVG 图像绑定到它的 src 属性 但它没有显示我需要的尺寸 如何调整它的大小以显示更大的图像 这是我的画

  • 使用 CSS 更改悬停时的 SVG 链接对象填充

    我的页面上有一个 SVG 对象链接 a href target blank gmail a 我正在尝试使用 SVG 文件中的以下代码更改悬停时的填充颜色 问题是 悬停效果仅在我删除

  • 创建响应式 SVG 剪辑路径 / 使 SVG 响应式

    我正在尝试使用创建响应式 SVG 剪辑路径

  • svg 圆不是用 javascript 绘制的

    我一直在尝试使用 HTML 中的 javascript 来进行 svg 操作的 hello world 我编写了下面的代码 虽然它生成了正确的 html 但我在浏览器中没有看到任何输出 也没有看到任何错误

  • 如何在 vue.js 中使用 SVG.js 插件？

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo

随机推荐

  • 这是 GCC 中的错误还是我的代码错误？

    我有这个C代码 int test signed char anim col if anim col gt 31 return 1 else if anim col lt 15 return 2 return 0 使用 Android NDK

  • SQL Server 中的并发执行

    表架构 SQL Server 2012 Create Table InterestBuffer AccountNo CHAR 17 PRIMARY KEY CalculatedInterest MONEY ProvisionedIntere

  • 从文件中读取 GLSL 着色器

    我正在尝试从如下所示的文件中读取顶点和片段着色器 version 330 core in vec3 ourColor out vec4 color void main color vec4 ourColor 1 0f but when i

  • 如何将 ASCII 字符的十六进制值写入文本文件？

    这是我目前所拥有的 void WriteHexToFile std ofstream stream void ptr int buflen char prefix unsigned char buf unsigned char ptr fo

  • 执行错误日志记录的简单方法？

    我创建了一个小型 C winforms 应用程序 作为一项附加功能 我正在考虑向其中添加某种形式的错误日志记录 有人对解决这个问题有什么好的建议吗 这是我从未考虑过添加到以前的项目中的功能 因此我愿意接受有更多经验的开发人员的建议 我正在考

  • HTML 将 Phaser 移动到容器 div 中

    目前正在 Phaser 中制作一个基于浏览器的游戏并尝试将其添加到容器中div我创建的标签 但是移相器似乎将自身推到容器下方div 两张截图对比 http gyazo com 3cc9b9333cf89d7fc879bd2cdc741609

  • 如何在 Strapi 中将用户不可编辑的字段添加到内容类型？

    说我有一个post具有以下 4 个字段的内容类型 title 细绳 content 细绳 slug 细绳 author 关系 如何添加第五个字段 该字段的值取决于上述 4 个字段之一且用户不可编辑 说吧 我想要一个wordCount字段中的

  • CFBundle可执行错误

    无法安装应用程序 Users myname Documents SDK iPhoneApplications x build Debug iphoneos x app 处的应用程序未指定 CFBundleExecutable 我不知道这意味

  • 在 Silverlight 4 中编辑标题

    我们正在开发一个浏览器外的 Silverlight 4 应用程序 并希望在应用程序加载后更改标题 Example public partial class MainPage UserControl public MainPage Initi

  • 递归深度有限的旅行目录树

    我需要递归地处理目录树中的所有文件 但深度有限 这意味着例如在当前目录和前两个子目录级别中查找文件 但不再进一步查找 在这种情况下 我必须处理例如 subdir1 subdir2 file 但不是 subdir1 subdir2 subdi

  • Xunit 中的测试异常 ()

    我正在尝试对此方法编写 Xunit 测试 public async Task

  • 在 DLL 中，函数表的结构如何？

    我一直在研究不明确支持我的操作系统的设备库的实现 特别是 我有一个反汇编的 DLL 以及大量的支持源代码 现在 功能表 导出表是如何构造的 我的理解是 第一个结构 data部分是 RVA 表 接下来是通过索引链接到第一个地址表的字符串表 这

  • Linux 内核线程没有地址空间

    为什么Linux内核线程没有地址空间 对于任何要执行的任务 它都应该有一个内存区域 对吗 内核线程的文本和数据去了哪里 内核线程确实有一个地址空间 只是他们都有同一个 这并不妨碍它们各自拥有不同的堆栈 文本和数据放置在内核地址空间 由所有线

  • 当数据包含 UTF 8 字符时 PHP 导出 CSV

    在 MySQL 中 我将数据字段类型设置为utf8 bin我正在以 Unicode 存储数据 文本在网页中正确显示 我想生成 Excel 文件 将数据从我的表导出到其中 输出在 xls and cvs是 我在这里查看了其他答案 它被提到使用

  • 如何在Android中编写特殊字符

    我想将单位添加到我的TextView 例如幂 2 如文本行上方的小写字母 微符号 等 我怎样才能做到这一点 是的 您可以使用 Unicode 字符Textview TextView tvtext new TextView this tvTe

  • 下载NLTK数据时出现PermissionError

    我使用 Anaconda 的 Python 3 6 3 发行版 它安装了 NLTK 但没有安装我项目所需的 NLTK DATA 问题是 当我尝试安装时 nltk download I get PermissionError Errno 13

  • 如何拆分同时包含分隔符和转义分隔符的字符串？

    我的字符串分隔符是 分隔符在字符串中转义为 E g irb main 018 0 gt s a b d e gt a b d e irb main 019 0 gt s split gt a b d e 有人可以建议我正则表达式 这样 sp

  • jQuery $.live() 不适用于 iPhone 上的表格行

    我正在使用 jQuery 使表格行可点击 live 功能 可以在 Chrome Firefox 甚至桌面 Windows Safari 上完美运行 但不能在 iPhone 上运行 bind 到处都可以使用 但出于明显的原因 我想使用其他功能

  • 代码优先更改数据源，无需连接字符串

    我在创建 MVC4 应用程序时似乎遇到问题 我采用了代码优先方法来创建模型 但 web config 文件中似乎没有创建连接字符串 构建的数据库似乎是在 localhost SQLEXPRESS 实例上构建的 但我想将其更改为外部数据源 如

  • svg 中的简单填充图案：对角线阴影

    我如何填充 SVG 形状 不是使用单一颜色 图像或渐变 而是使用阴影图案 如果可能的话对角线 已经两个小时了 我什么也没发现 至少在2005年之后 我认为一个可能的破解方法是使用孵化的 PNG 作为填充 但这并不理想 我在互联网上也没有找到

热门标签