在SVG中引用变量
撰写时间：2026-01-02
修订时间：2026-01-04
JavaScript 支持变量，CSS 支持变量，本文考查在SVG 引用变量的各种方式。
symbol
先定义symbol ，然后使用use 来引用symbol 。
CSS样式
这种方式，各浏览器支持力度不一样。Safari 没任何问题，而Chrome 不支持这种方式的变量引用，将报错属性值语法错误 ，导致cx 及cy 的值均为0 。
JavaScript
从头构建SVG代码
let startPtX = 50;
let startPtY = 100;
let endPtX = 250;
let endPtY = 100;
let markerR = 5;
let rx = 20;
let ry = 10;
let svgStr = `
<path
d="
M ${startPtX} ${startPtY}
A
${rx} ${ry},
25,
1, 1
${endPtX} ${endPtY}
"
fill="none" stroke="white" />
<line x1="${startPtX}" y1="${startPtY}" x2="${endPtX}" y2="${endPtY}" stroke="orange" stroke-width="1" />
<circle cx="${startPtX}" cy="${startPtY}" r="${markerR}" fill="red" stroke="white"; />
<circle cx="${endPtX}" cy="${endPtY}" r="${markerR}" fill="green" stroke="white"; />
`;
pc.appendHTMLStr(svgStr);
因多行模板字符串支持变量的引用，因此这种方式非常高效，React 即采用了这种方式的JSX 变体。
在编写HTML 代码时，凡是通过${...}的方式引用了变量的SVG 标签名，都须将诸如<path ... /> 的方式改为<path ... /> 的方式，否则浏览器将报错属性值语法错误 。尽管上面的代码本身为字符串，但浏览器试图将它们解析为SVG 元素。经转义后，浏览器不再试图解析，因此不再报错。
