程序员经验分享-hwhale

的巨大高度值不会阻止截断

2023-12-02

我正在尝试申请<filter> on a <path>但我遇到了被剪裁的问题，不仅是模糊，还有原始图像的部分，即标记。

所以我尝试增加默认过滤器高度（即120%）但这似乎没有帮助。

<svg style="height:400px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" height="999%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-200)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-120)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

Now the <g>跨越包围其所有子项所需的范围，这意味着对于顶部箭头来说，一开始的高度并不是很多，所以我尝试使用绝对值而不是相对值height但这也无济于事：

<svg style="height:300px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" height="1234">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-150)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

知道什么可能导致这种剪裁以及可以采取什么措施吗？为什么height属性值超过某个点在这里没有效果吗？

（在 Chrome、Firefox 和 Edge 中重现 – 看起来不像是浏览器错误。）


您还必须移动滤镜效果区域的上边框。默认为y=-10%.

<svg style="height:400px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" y="-200%" height="500%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-200)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-120)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

顺便说一句，只有在设置时使用绝对值才有效filterUnits="userSpaceOnUse"。关于 y 值的使用的相同注释也适用。

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

SVG

svgfilters

的巨大高度值不会阻止截断 的相关文章

  • D3 数据对象内的循环数组

    data name c1 id 4690 day 1 3 start 8 00 end 10 00 name c3 id 5283 day 3 4 start 8 00 end 17 00 name c4 id 4862 day 4 sta

  • CSS 中的边框图像 svg（颜色）样式？

    是否可以从CSS样式填充自定义边框图像 我应该使用哪个属性 E g border image source url assets images dots new svg border color red doesn t work fill

  • 如何将 SVG 元素下载为 SVG 文件

    在过去的几个月里 我一直在编写处理椭球地球的代码 最近我已经完成了它 我的教授现在希望我将我制作的图表的图片作为 SVG 文件发送给他 我知道在Python中你可以在你的项目中放入几行代码来让它下载图像 但我不确定它是如何工作的JavaSc

  • 矩形相当于文本的文本锚点表示属性吗？

    是否有一个与文本的文本锚点表示属性等效的矩形 我希望能够从左侧 右侧或根据情况定位矩形 我知道这可以通过一些简单的计算来完成 但我只是想知道是否已经存在内置的东西 文本锚点演示属性上的链接 https developer mozilla o

  • 动画后 SVG 路径发生变化

    我正在画一个

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

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

  • 使 SVG 中的混合模式真正起作用吗？

    我曾多次做过以下事情

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

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

  • 更改svg中半圆的背景颜色

    我想在此 svg 代码上创建上弦月和第三弦月

  • 如何获取 svgElement 的比例？

    我正在研究 svg div style width 300 height 300 div

  • 将元素添加到 D3 圆包节点

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg

  • 使用 jQuery 修改 svg 文件

    我有一个 svg 文件 其中包含一些形状和一些文本 我想在运行时修改 svg 以便某些形状可以更改颜色 某些文本可以更改其内容 假设我的外部 svg 文件中只有两个元素 圆圈 1 具有该 id 的蓝色实心圆圈 text1 包含该 id 的

  • 无法在 Firefox 中显示我的 svg 图像？

    我无法在 Firefox 中显示我的 svn image 它在 Safari 和 Chrome 中工作正常 没有 IE 所以还没有测试过 它在我的html中是这样实现的 img 类 logo1 src images logo6 svg 其中

  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

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

  • SVG 图标像素对齐？

    在此图像中 左侧 黑色 垃圾桶是图标字体 它的字体大小是 16px 这使得图标在 100 的时间里看起来都很清晰 两个蓝色垃圾桶是 SVG 它们具有完全相同的标记 其中之一happened一个是像素对齐的 另一个不是 我怎样才能强制我的 S

  • 如何使用 Selenium webdriver 测试对 SVG 对象的点击？

    我正在尝试编写代码来检查单击 SVG 对象的功能 例如此 URL 上的美国州 http www amcharts com svg maps map usa 这可行 但是有更好的方法吗 不需要物理移动鼠标的东西 robert new Robo

  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr

  • 海量矢量资源导入Android Studio

    有没有办法将许多矢量 svg 图像导入到项目中 导入 30 多个图标有点无聊而且相当愚蠢 Android Studio 使用哪个脚本来转换 svgs 现在 Android Studio 中可以实现这一点 在左侧的资源管理器中 效果很好

  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失？

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and

  • 如何在 SVG 中显示 unicode？

    以 SVG 格式存储在数据库中的信息 如果数据包含文本 它将显示为 Unicode 有必要在浏览器中正确显示 SVG 文件

随机推荐

  • Putty - 使用 C# 动态删除文件

    我正在开发一个使用 C 作为编程语言的 Windows 应用程序 要求是 动态登录putty 从特定位置删除旧文件 我目前正在使用下面的代码登录 Putty 但如何运行删除命令 string hostname hostname string

  • Plotly：更新菜单的按钮实际上是如何工作的？

    我为什么想知道 这似乎是一个非常简单的问题 但我在使用下拉菜单编辑具有多个轨迹的图形时遇到了一些困难 所以我真的很渴望确保我理解plotlys下拉菜单 更新菜单和按钮的内部工作原理100 正确 因此 如果有人能抽出时间来看看下面的示例 那就

  • 使用 sscanf 读取带空格的字符串

    对于一个项目 我试图从字符串中读取一个 int 和一个字符串 唯一的问题是sscanf 似乎打破了阅读 s当它看到一个空格时 有什么办法可以绕过这个限制吗 这是我正在尝试做的一个例子 include

  • 反序列化不一致的 JSON 属性

    希望有人可以帮助我解决我尝试使用 Newtonsoft Json 反序列化的大型 JSON 文件中出现的以下不一致问题 对象的属性之一有时会显示为 roles field1 value field2 value 而其他时候 相同的属性显示为

  • Ionic Framework/Cordova 上的 Google 地图不适用于 Android 构建

    我一直在为一个应用程序编写代码来跟踪用户位置并使用谷歌地图显示它 我的代码在浏览器 Safari Firefox Chrome 中完美运行 但在移动设备 android 上根本不起作用 谷歌地图 API 不起作用 导航也不可靠 我是一个离子

  • Discord 机器人如何处理来自多个服务器的事件

    我正在为我的服务器使用discord py 重写分支 开发一个discord 机器人 我需要邀请该机器人到多个服务器并同时使用它 我的问题是 我是否需要为每台服务器设置一个新线程 或者机器人是否对事件进行排队并一一处理它们 如果它确实对它们

  • 将文件作为输入流加载的不同方法

    有什么区别 InputStream is this getClass getClassLoader getResourceAsStream fileName and InputStream is Thread currentThread g

  • 选择不同...内连接与选择...其中 id in (...)

    我正在尝试创建表的子集 作为物化视图 定义为在另一个物化视图中具有匹配记录的记录 例如 假设我有一个包含 user id 和 name 列的用户表 以及一个包含entry id user id activity 和 timestamp 列的

  • Google BigQuery 中的多级数据透视

    是否可以使用 BigQuery 在一个查询中执行以下数据透视 或者我需要将其分解为多个查询 这是原始数据 这是数据透视表 有没有办法在 BigQuery 中构造任意嵌套的数据透视表 或者每个级别都需要自己的 SQL 查询吗 请注意 在上面

  • namespace myspace { int x } 现在为什么 `myspace::x=3;` 给出错误？

    Code include

  • 如何使用vb6检查当前键盘的语言？

    如何使用 vb6 检查当前键盘的语言 IF Is it the English language Then Msgbox EN End IF 我正在使用这个未经充分测试的片段 Private Const LOCALE SISO639LANG

  • Headless LibreOffice 在 Windows 上导出为 PDF 非常慢（比 Linux 慢 6 倍）

    我经常需要使用 LibreOffice 将许多 gt 1000 docx 文档导出为 PDF 这是一个示例文档 测试 docx 以下代码可以工作 但在 Windows 上速度相当慢 每个 PDF 文档平均 3 3 秒 import subp

  • Management Studio 和 TableAdapter 之间存储过程的执行时间差异很大

    对于相同的输入 存储过程如何通过 Management Studio 在 10 秒内运行 但通过 TableAdapter 需要 15 分钟 它是可重复的 这意味着我在每个环境中至少运行了 3 次 并且 Management Studio

  • Java Netty负载测试问题

    我使用文本协议编写了 接受连接和轰炸消息 100 字节 的服务器 并且我的实现能够使用第 3 方客户端发送大约 400K 秒的环回消息 我为这项任务选择了 Netty SUSE 11 RealTime JRockit RTS 但是当我开始基

  • 计算数组中的个数

    我试图在 Verilog 中计算 4 位二进制数中 1 的数量 但我的输出是意外的 我尝试了几种方法 这是我认为应该有效的方法 但事实并非如此 module ones one in input 3 0 in output 1 0 one a

  • 如何在数据库优先方法中进行迁移

    我正在使用实体框架数据库优先方法 并想知道如何管理数据库优先方法中的迁移 我们正在手动更改数据库架构 实体框架有什么方法可以将更改相应地应用到项目中 我想我首先对代码感到困惑existing database and database fi

  • 相当于 Android Studio 中的 Clean & build？

    今天 当从 Android Studio 运行应用程序时 它不是根据我的最新代码构建的 我找了一个清洁和构建选项 但我找不到 所以我的问题是 Android Studio 相当于什么清洁和构建 Android studio是基于Intell

  • 使用远程 FTP 原子包和私钥发出与服务器的连接

    我正在尝试使用原子包 Remote FTP 并使用私钥连接到我的服务器 我在服务器上设置了 SSH 密钥 并且可以使用 putty 成功连接 私钥保存在我的项目文件夹中 并且我有一个现有的 ftpconfig 文件 没有私钥 当我替换文件内

  • 在两个 ggplot 直方图上显示平均值和中位数

    我是新的 stackoverflow 用户 目前无法对原始帖子发表评论来提问 我发现了以前的 stackoverflow 答案 https stackoverflow com a 34045068 11799491 我想知道如何在此图表中添

  • 的巨大高度值不会阻止截断

    我正在尝试申请

热门标签