HTML svg标签的linearGradient？实现矢量图形的渐变填充-html教程-PHP中文网

svg的lineargradient天生是矢量实现，图形未显示渐变主因是漏写标签——浏览器将渐变视为资源而非图形元素，未包裹在内即被忽略而填默认色；必须确保位于内且在引用图形之前，id大小写、英文括号及作用域须严格匹配。

html svg标签的lineargradient？实现矢量图形的渐变填充

SVG 的 linearGradient 本身是矢量实现，不用“转成矢量”，它天生就是——只要写法合规，缩放、旋转、响应式都不会糊。

为什么图形没显示渐变？90% 是漏了 `<defs></defs>`

浏览器把 <lineargradient></lineargradient> 当作资源，不是图形元素；不包在 <defs></defs> 里，就直接被忽略，图形填默认色（常是黑或透明）。

<defs></defs> 必须出现在 <svg></svg> 根标签内，且要在所有引用它的图形（如 <rect></rect>、<path></path>）之前
不能写成 <svg><lineargradient>...</lineargradient><rect fill="url(#g)"></rect></svg> —— 这种写法无效
如果 SVG 是通过 <img src="icon.svg"> 引入的，外部 HTML 里的 <defs></defs> 不会被识别，渐变必须定义在 SVG 文件内部

`x1`/`y1`/`x2`/`y2` 用百分比还是数值？

用百分比（如 x1="0%"）更安全。像素值（如 x1="10"）在容器缩放、viewBox 变化或响应式布局下容易错位，导致渐变方向“跑偏”。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

x1="0%" y1="0%" x2="100%" y2="0%" → 水平左到右
x1="0%" y1="0%" x2="0%" y2="100%" → 垂直上到下
x1="0%" y1="0%" x2="100%" y2="100%" → 对角左上到右下
若需固定物理长度（比如只在图标内部渐变 20px），才考虑 gradientUnits="userSpaceOnUse" 配合像素值，但多数 UI 场景不需要

`fill="url(#id)"` 不生效？检查这三处硬性匹配

ID 大小写、括号、作用域，三者错一个，渐变就断掉。

ID 名称严格大小写敏感：url(#MyGrad) ≠ url(#mygrad)
括号必须是英文半角：url(#grad) ✅，url（#grad） ❌（中文括号）
内联 SVG 中，<defs></defs> 和图形必须在同一个 <svg></svg> 标签内；跨 <svg></svg> 标签无法共享 ID
调试技巧：先给图形设个纯色 fill="hotpink" 确认它渲染出来了，再换回 url(#xxx)

`<stop></stop>` 的 `offset` 超出 0–100% 会怎样？

不会报错，但超出部分被静默截断——只在 [0%, 100%] 区间插值，首尾颜色会被“撑满”，容易误判为渐变失效。

<stop offset="-20%" stop-color="white"></stop> → 实际从 0% 开始用白色
<stop offset="120%" stop-color="black"></stop> → 实际到 100% 就结束，黑色只在终点体现
offset 必须单调递增，否则行为未定义（Chrome 可能重排，Firefox 可能跳过）
多个 <stop></stop> 可精细控制过渡节奏，例如 offset="0% / 30% / 70% / 100%"

真正容易被忽略的是：渐变定义本身不参与渲染流程，也不触发 layout，但它对坐标系和单位极其敏感——gradientUnits 默认是 objectBoundingBox（归一化到图形包围盒），一旦你手动改了 viewBox 或加了 transform，又没同步调整 gradientUnits 或坐标值，视觉偏差就来了。