程序员经验分享-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

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

  • 如何缩放 SVG 路径以适应窗口大小？

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是

  • 裁剪 SVG 的正确方法？

    我对 SVG 图像完全感到困惑 我想将图像裁剪为其核心内容 我想通过指定其视图框和 或视口和 或其他任何内容来裁剪它 除非我不想更改折线元素中的任何点 图像按原样呈现类似这样的内容 注意 边框仅用于说明目的 边框实际上并不是 SVG 的一部

  • iText7 将 SVG 添加到 PdfDocument 中以及可能出现的问题

    关于问题的答案 如何使用 iText7 将 SVG 添加到 PDF 这是一个链接点击这里 https stackoverflow com questions 50059456 how to add an svg to a pdf using

  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe

  • 跨浏览器 SVG keepAspectRatio

    我正在尝试有一个SVG里面的图形 img 适合 不裁剪 标签内部且保留宽高比的标签 我创建了SVG在 Inkscape 中 它在所有浏览器上都按预期工作 除了互联网浏览器 9 为了让它发挥作用IE 9我必须添加viewBox 0 0 580

  • 语法错误：未知：默认情况下不支持命名空间标签

    尝试将 svg 下载为 React 组件时出现以下错误 语法错误 未知 默认情况下不支持命名空间标签 React 的 JSX 不支持命名空间标签 您可以打开 throwIfNamespace 标志来绕过此警告 import React fr

  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display

  • SVG 沿圆弧添加文本

    我正在尝试绘制 SVG 径向饼图 如下所述 色卡 https stackoverflow com a 18210763 1395178 现在我尝试将文本与圆弧一起添加到每个切片 我试图展示Text 1具有与 M 和 A 值完全相同的 x y

  • 具有宽度/高度的 SVG 在 IE9/10/11 上无法缩放

    IE 9 10 11 存在一个已知问题 如果您有一个 SVG 文件

  • 将 SVG 多边形转换为路径

    我有一个相当大的行政分区 SVG 文件 需要在 Raphael JS 中使用 它有 600 个多边形 重量为 1 2 Mb 现在 我需要将这些多边形转换为路径 以便它在 Raphael 中工作 最棒的多路径工具 http aautar di

  • 将 SVG 下载为 PNG 图像

    我想将 HTML 页面中的 SVG 元素下载为 PNG 格式 我尝试了此操作 但下载了一个空白的 PNG 图像 如何将我的 HTML SVG 下载为 PNG 我用过这个https bl ocks org biovisualize 81878

  • 角度错误：冲突：多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每

  • 动画持续时间不准确

    我在 SVG 中创建了加载微调器 但动画持续时间不准确 例如 30 秒动画持续时间 实际 26 秒 动画持续时间 45 秒 实际持续时间 38 秒 60 秒动画持续时间 实际 51 秒 我很绝望 不知道哪里可能出错 你能帮助我吗 1 旋转器

  • 如何在 blaze-html 中渲染 blaze-svg 标记

    我想将使用 blaze svg 生成的 svg 图直接包含在使用 blaze html 生成的 html 中 两者都基于 blaze markup 所以我希望它很容易 diagram1 Svg diagram1 try1 Html try1

  • 动画 SVG 在页面加载之前不会显示动画

    我的网站包含大量广告 加载需要一段时间 确切地说 这并不是一个问题 但我注意到任何 SVG 动画都会立即绘制第一帧 但动画只有在页面上的所有加载完成后才会出现 SVG 动画通常指示旋转器 加载图标 有没有办法立即启动SVG动画 或者如果我将

  • Svg 点击事件无法正常工作

    我试图让我的 SVG 看起来像一个 饼形 看起来一切都很好 此外 我希望它们每个都有不同的点击事件 function one alert 1 function two alert 2 function three alert 3 funct

  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在

  • Android 上的 SVG 支持

    Android 支持 SVG 吗 有什么例子吗 最完整的答案是这样的 Android 2 x 默认浏览器本身不支持 SVG Android 3 默认浏览器支持 SVG 要将 SVG 支持添加到 2 x 版本的平台 您有两个基本选择 安装功能

  • 将 SVG 的高度设置为行高？

    我想将我的 SVG 图像作为图标包含在标题旁边 h1 img src icon sell svg class icon Verkaufen h1 字体大小为h1 is 36px和line heigt is 1 1 我使用检查器工具发现计算出

  • SVG 查找路径的旋转角度

    我的 SVG 地图有问题 我使用 jVectorMap 创建自定义地图 我需要在字段中心写入每个字段的名称 例子是 JSFiddle 示例 http jsfiddle net mmogn90q 1 放大右侧查看文字 我可以用这个函数找到每个

随机推荐

  • 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 我想知道如何在此图表中添

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

    我正在尝试申请

热门标签