SVG 渐变作为具有绝对位置的折线描边背景

2024-01-31

是否能够设置应用于折线的渐变背景的绝对位置?

例如当我设置渐变时:

<filter id="black-glow">
    <feColorMatrix type="matrix" values=
       "0 0 0 0   0        
        0 0 0 0   0
        0 0 0 0   0
        0 0 0 1   0" />
    <feGaussianBlur stdDeviation="3" result="coloredBlur" />
    <feMerge>
      <feMergeNode in="coloredBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>

折线的笔画:

<polyline points="50,350 ... 350,239" style="fill:none;" stroke="url(#grad1)" stroke-width="3" stroke-linecap="round" />

(折线有最大/最小位置点)

结果没问题:

但是,当折线平坦时:

绿色的颜色要高得多。由于这是彩色图表,因此我需要实现不断查看背景,而与绘制折线的方式无关。


如果您希望将渐变应用于用户空间,则可以通过如下表示渐变来实现:

<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0"
                y1="350" x2="0" y2="220">

See fiddle http://jsfiddle.net/azuL1ets/1/.

x1、y1、x2 和 y2 中的值将相对于当前用户空间坐标系,因此如果您使用百分比,它们将相对于最近的视口,而不是相对于使用渐变的形状的边界框。请参阅SVG 规范 https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementGradientUnitsAttribute了解详情。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SVG 渐变作为具有绝对位置的折线描边背景 的相关文章

  • HTML 中包含的带有“img”标签的 SVG 是否可以链接到带有“image”标签的外部图像?

    我在服务器上的同一位置有以下文件 image svg 和文件 bitmap png
  • 在 SVG 中使用变换模拟枢轴旋转

    我在 SVG 中有一个矩形 需要从特定点绕轴旋转 我能想到的最好方法是变换到枢轴的 xy 旋转角度 然后再次变换 问题是第二个变换的 xy 我认为它会在某种程度上采用 cos 和 sin 只是不确定在哪里或为什么 会旋转 90度到 也许我以
  • 具有多个路径的 SVG 剪辑路径的悬停事件

    我有一个 SVG 演示图像 其中包含多个正在剪辑动画 GIF 的圆圈 当用户将鼠标悬停在每个圆圈上时 是否可以观察每个圆圈的悬停事件 例如左上角的圆圈或右中角的圆圈 另外 当这些圆圈悬停时 是否可以操纵这些圆圈上的颜色叠加 EDIT 理想情
  • 尝试旋转和变换 SVG 路径 - 我需要三角学计算吗?

    我正在尝试使用鼠标 SVG 路径进行操作 该路径代表电子电阻器的符号 该符号需要使用 引线 末端进行操作 如果您可以想象真实的电阻器 因此 我试图实现拖动第一个点周围 第二个点仍然存在 并且当在新坐标上拖动第一个点时 路径的所有点都按比例表
  • 哪个 SVG/SMIL DOM 元素具有“beginElement”方法?

    最终 这是针对将在 Firefox 中运行的 Kiosk 风格的应用程序 使用 jQuery 1 6 4 因此答案可能是特定于 Firefox 的 我正在尝试制作动画 SVG 但我正在尝试通过动态插入 SMIL 来为其设置动画 我没有看到任
  • 如何在 Firefox 中缩放 SVG 背景图像而不考虑宽高比?

    我有一个CSSbackground image设置在具有流体高度和宽度的元素上 它是一个 SVG 预期的行为是让它向任何必要的方向拉伸以覆盖整个元素的区域 在 Chrome Safari 甚至是糟糕的 Internet Explorer 9
  • 如何在SVG中实现橡皮擦功能?

    我认为 SVG 在某些功能上比 HTML5 canvas 更好 但我无法想象一种简单的方法来实现橡皮擦功能 我有什么方法或例子吗 这是一种非常笨拙的方法 但您可以简单地用白色描边模仿标准钢笔工具
  • 更改svg中半圆的背景颜色

    我想在此 svg 代码上创建上弦月和第三弦月
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 为什么媒体查询中的 CSS 旋转不会旋转回来

    我有一个 SVG 其中一些元素根据媒体查询进行旋转 如下所示 media max width 480px rect transform rotate 10deg 该元素旋转得很好 但 至少在 Chrome 中 它拒绝返回 这是为什么 其他指
  • 在 Jade 模板中包含 SVG xml

    是否可以创建一个 Jade mixin 它从文件系统读取文件 并将其回显到渲染的 HTML 中 我试过这个 mixin svg file var fs require fs var xml fs readFileSync file div
  • 如何使用 Selenium webdriver 测试对 SVG 对象的点击?

    我正在尝试编写代码来检查单击 SVG 对象的功能 例如此 URL 上的美国州 http www amcharts com svg maps map usa 这可行 但是有更好的方法吗 不需要物理移动鼠标的东西 robert new Robo
  • CSS 按钮将线性渐变背景转换为透明背景

    我有一个带有线性渐变背景 橙色边框和一些文本的按钮 当我将鼠标悬停在按钮上时 我希望背景变得透明 而不更改按钮的其他属性 我尝试将不透明度转换为 0 但显然 这会隐藏边框和文本 我也尝试过转换背景 但它不起作用 因为我没有要转换到的端点 因
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 自定义 SVG 未加载到我的图像标签中

    目前我正在尝试将自定义 svg 组件加载到图像标签内 但由于某种原因 我无法看到地图组件内的 svg 图像 我的自定义 SVG 文件如下所示 我在 SVG 中加载另一个图像
  • 在 Java 中使用 Batik 检查和删除 SVG 中的属性

    这个问题基本上说明了一切 如何检查 SVG 是否具有 viewBox 属性 我正在使用蜡染库 我需要这个 因为我需要 至少 通知用户有一个 viewBox 属性 我可以删除它吗 使用 org w3c dom 类 您可以按照以下方式做一些事情
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu

随机推荐

  • Textmate 中的自动完成

    有时我会观看有人使用文本伴侣的屏幕截图 我是一名 Rails 开发人员 所以这些是 Rails 屏幕截图 他们会输入如下内容 def 例如 并且 end 会自动出现在下面 我确实启用了 Rails 捆绑包 为什么我没有发生这种情况 Than
  • 使用 R 绘制二次回归线

    我对 R 很陌生 而且对 R 也很陌生plotly 我正在尝试绘制二次 即二次多项式 回归线 一旦一些价格与年份 以及相同的价格与某些整数列表 可以相同 比方说分数 本例中的数据是 price c 995 675 690 600 612 7
  • 如何强制 r optim 运行更多迭代?

    R Optim 比我想要的更早停止迭代 我使用 method L BFGS B 因为我需要不同参数的不同界限 我知道我可以通过 control gt maxit 设置最大迭代次数 但 optim 没有达到最大值 我想 control gt
  • Emacs - Ubuntu 初始化

    在 ubuntu 上加载 emacs 的行为很奇怪 似乎发生了一些初始化 这些初始化不在 emacs 中 也不在 emacs 报告通过 emacs debug init 加载的任何文件中 我发现了一些与字体相关的调整大小的参考 但这种行为似
  • 依赖注入架构设计——服务类循环引用

    我有以下服务类别 public class JobService private UserService us public JobService UserService us this us us public void addJob J
  • Objective C - 访问 zip 中的文件而不解压 zip

    我正在寻找一种访问 zip 文件中的文件而不提取整个文件的方法 我在互联网上找到的所有 zip 解决方案似乎都提取了整个 zip 有谁知道解决方案吗 Google 有一个基于 minizip 的 Objective C 库 http cod
  • 如何从事件中删除所有事件处理程序?

    我有以下课程 Public Class SimpleClass Public Event SimpleEvent Public Sub SimpleMethod RaiseEvent SimpleEvent End Sub End Clas
  • 如何处理 csv 列表中的单词[重复]

    这个问题已经存在了 我遇到了基于以下程序的问题 Code Download the helper library from https www twilio com docs python install import os from tw
  • 如何使用 python 的 cassandra-driver 将地图类型插入 cassandra

    因为 cassandra 支持地图类型 我想将 python 字典插入 cassandra 中 我试过这个 cql Insert into table name my key name my dict values s s s my key
  • 具有水平滚动功能的 SVG

    我正在尝试用 D3 制作 SVG 图表 https cdnjs cloudflare com ajax libs d3 3 5 17 d3 min js https cdnjs cloudflare com ajax libs d3 3 5
  • jQuery 延迟方法和 ajax beforeSend()

    通过使用 ajax 中的延迟对象 成功回调可以替换为deferred method done 错误回调 acn 替换为deferred method fail 完整回调可以替换为always 通过使用 var jqxhr ajax url
  • Android 和 BouncyCastle 的 IllegalAccessError

    我正在尝试实现时间戳请求 如下所示 http bouncy castle 1462172 n4 nabble com Timestamp request and response td1558231 html http bouncy cas
  • Flask 中 AJAX 身份验证的 CSRF 保护

    我想在网站上使用 AJAX 化登录和注册表单 到目前为止 我一直使用 WTForms 主要是为了它内置的 CSRF 保护 但对于这个项目 我觉得不值得 额外的抽象层 因此令人沮丧 对于一些应该漂亮的东西简单的 所以我遇到了这个片段 http
  • 如何参数化 xunit 类装置?

    xUnit 提供了 共享 类装置的概念 如中所述测试之间共享上下文 https xunit net docs shared context 到目前为止我还没有弄清楚是否有一种方法可以对此类装置进行参数化 例如 如果DatabaseFixtu
  • VB.NET:为 IF 条件内的变量赋值?

    是否有可能为 VB NET 中 IF 条件内的变量赋值 像这样的东西 Dim customer As Customer Nothing If IsNothing customer GetCustomer id Then Return Fal
  • XSLT:如何在不按内容排序的情况下反转输出

    我有一个项目清单
  • 如何在 JavaScript 中使用 zindex

    zindex 的语法是什么 我试过这样 document getElementById iframe div1 style zIndex 2000 document getElementById iframe div1 style z in
  • 当滚动条出现时,如何阻止Bootstrap 3.1.1向左移动内容?

    我正在使用 Bootstrap 3 1 1 当我有一个页面由于内容较多而需要垂直滚动条时 Bootstrap 会将 html 正文移动超过 15px 以便为垂直滚动条腾出空间 这对于 Bootstrap 模式来说是一个大问题 但我相信它在
  • Linux 上 C 语言的原子操作

    我正在尝试将我编写的一些代码从 Mac OS X 移植到 Linux 并且正在努力寻找仅适用于 OSX 的合适替代品OSAtomic h 我找到了海湾合作委员会 sync 系列 但我不确定它是否与我拥有的旧编译器 内核兼容 我需要代码在 G
  • SVG 渐变作为具有绝对位置的折线描边背景

    是否能够设置应用于折线的渐变背景的绝对位置 例如当我设置渐变时