RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1580883
Accepted
Vitaliy Stop_RU_war_in_UA
Vitaliy Stop_RU_war_in_UA
Asked:2024-05-20 04:34:03 +0000 UTC2024-05-20 04:34:03 +0000 UTC 2024-05-20 04:34:03 +0000 UTC

组的 Svg 渐变

  • 772

有svg一个组包装器,旨在一次性将样式应用于内部组的所有 5 个元素。然而,径向梯度基本上不会应用于整个组,而是单独应用于 5 个组中的每一个。怎样才能一次性应用到所有人身上呢?我究竟做错了什么?

<svg width="800" height="100" viewBox="0 0 800 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="filter0_i_406_6193" x="0.0524902" y="0" height="41.5858" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" width="100%">
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"></feColorMatrix>
      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_406_6193"></feBlend>
    </filter>
    <radialGradient id="paint0_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(152 21.0001) rotate(-180) scale(154 1129.33)">
      <stop stop-color="#738898" stop-opacity="0"></stop>
      <stop offset="1" stop-color="#738898"></stop>
    </radialGradient>
    <radialGradient id="paint1_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(152) rotate(90) scale(42 520.249)">
      <stop stop-color="#9B8474"></stop>
      <stop offset="1" stop-color="#D5AF71" stop-opacity="0"></stop>
    </radialGradient>
  </defs>

  <g filter="url(#filter0_i_406_6193)" fill-opacity="0.65" fill="url(#paint0_radial_406_6193)">
    <!-- Левый блок с углами -->
    <g transform="translate(0, 0)">
      <path d="M14.9626 2.94761C16.8395 1.06082 19.391 0 22.0523 0H40V40H22.0523C19.391 40 16.8395 38.9392 14.9626 37.0524L1.50763 23.5262C-0.432568 21.5757 -0.432566 18.4243 1.50763 16.4738L14.9626 2.94761Z"></path>
    </g>
    <!-- Ровный участок между левым блоком и центром -->
    <g transform="translate(40, 0)">
      <rect height="40" width="216"></rect>
    </g>
    <!-- Центральный блок -->
    <g transform="translate(256, 0)">
      <path d="M 0 0 H 8 V 40 H 6.4142 C 6.149 40 5.8946 40.1054 5.7071 40.2929 L 4.7071 41.2929 C 4.3166 41.6834 3.6834 41.6834 3.2929 41.2929 L 2.2929 40.2929 C 2.1054 40.1054 1.851 40 1.5858 40 H 0"></path>
    </g>
    <!-- Ровный участок между центром и правым блоком -->
    <g transform="translate(264, 0)">
      <rect height="40" width="216"></rect>
    </g>
    <!-- Правый блок с углами -->
    <g transform="translate(480, 0)">
      <path d="M0 0H17.948C20.609 0 23.1605 1.06082 25.0374 2.94761L38.4924 16.4738C40.4326 18.4243 40.4326 21.5757 38.4924 23.5262L25.0374 37.0524C23.1605 38.9392 20.609 40 17.948 40H0V0Z"></path>
    </g>
  </g>
</svg>

svg
  • 1 1 个回答
  • 18 Views

1 个回答

  • Voted
  1. Best Answer
    UModeL
    2024-05-20T19:54:16Z2024-05-20T19:54:16Z

    特定组中的每个变换都会创建自己的渐变上下文。

    为了避免这种情况,有必要将转换直接传输到元素属性(可能需要重新计算或转换)。例如:

    <!-- До -->
    <g transform="translate(40, 0)">
      <rect height="40" width="216"/>
    </g>
    <g transform="translate(256, 0)">
      <path d="M 0 0 h 8 v 40 H 6 l -1 1 H 3 l -1 -1 H 0"/>
    </g>
    
    <!-- После -->
    <g>
      <rect x="40" y="0" height="40" width="216"/>
    </g>
    <g>
      <path d="M 256 0 h 8 v 40 h -2 l -1 1 h -2 l -1 -1 h -2"/>
    </g>
    

    然后我们就得到了想要的效果:

    <svg width="800" height="100" viewBox="0 0 800 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="filter0_i_406_6193" x=".1" y="0" height="41.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" width="100%">
          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
          <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <feOffset/>
          <feGaussianBlur stdDeviation="1.5"/>
          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
          <feBlend in2="shape" result="effect1_innerShadow_406_6193"/>
        </filter>
        <radialGradient id="paint0_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(260 21.0001) rotate(-180) scale(154 1129.33)">
          <stop stop-color="#738898" stop-opacity="0"/>
          <stop offset="1" stop-color="#738898"/>
        </radialGradient>
      </defs>
      <g filter="url(#filter0_i_406_6193)" fill-opacity=".7" fill="url(#paint0_radial_406_6193)">
        <!--Левый блок с углами-->
        <g>
          <path d="M15 3c2-2 4-3 7-3h18v40H22c-3 0-5-1-7-3L2 24c-2-2-2-6 0-8L15 3Z" />
        </g>
        <!--Ровный участок между левым блоком и центром-->
        <g>
          <rect x="40" y="0" height="40" width="216" />
        </g>
        <!--Центральный блок-->
        <g>
          <path d="M256 0h8v40h-2l-1 1h-2l-1-1h-2" />
        </g>
        <!--Ровный участок между центром и правым блоком-->
        <g>
          <rect x="264" y="0" height="40" width="216" />
        </g>
        <!--Правый блок с углами-->
        <g>
          <path d="M480 0h18c3 0 5 1 7 3l13 13c2 2 2 6 0 8l-13 13c-2 2-4 3-7 3h-18V0Z" />
        </g>
      </g>
    </svg>


    我不知道为什么你需要每个人物都在自己的组中,但如果你进一步缩短它......

    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 100">
      <defs>
        <radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="matrix(-154 0 0 -1129.33 260 21)" gradientUnits="userSpaceOnUse">
          <stop stop-color="#738898" stop-opacity="0"/>
          <stop offset="1" stop-color="#738898"/>
        </radialGradient>
        <filter id="b" width="100%" height="41.6" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
          <feOffset/>
          <feGaussianBlur stdDeviation="1.5"/>
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
          <feBlend in2="shape" result="effect1_innerShadow_406_6193"/>
        </filter>
      </defs>
      <g fill="url(#a)" fill-opacity=".7" filter="url(#b)">
        <path d="M15 3c2-2 4-3 7-3h18v40H22c-3 0-5-1-7-3L2 24c-2-2-2-6 0-8L15 3Zm25-3h216v40H40zm216 0h8v40h-2l-1 1h-2l-1-1h-2m8-40h216v40H264zm216 0h18c3 0 5 1 7 3l13 13c2 2 2 6 0 8l-13 13c-2 2-4 3-7 3h-18V0Z"/>
      </g>
    </svg>

    我还建议仅以绝对值表示路径的开头(M);对于其他点,相对值(c、q、a、l、h...)是可取的。这将使移动图形变得更容易,而不会影响其尺寸并且仅更改坐标原点。

    • 1

相关问题

  • 字母S怎么画?

  • 在 svg 上绘制按钮

  • 将 viewBox 坐标转换为 svg 并将一个 svg 嵌入到另一个

  • 如何制作圆形箭头?

  • 如何消除 SVG 对象的大小限制不被模糊?

  • 为什么 SVG 不能在 iphone 上正确显示?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5