因CSP限制，如何用外部JavaScript设置内嵌SVG样式？

问题核心原因 #

你当前的代码存在两个关键问题：

1. 原CSS用类选择器批量设置样式，但你通过getElementById仅处理单个元素，无法覆盖SVG中所有同类别元素；
2. SVG特有的CSS属性在JS的style对象中需使用驼峰命名（替代CSS里的短横线命名），比如stroke-width对应style.strokeWidth，clip-rule对应style.clipRule，直接用短横线命名会导致属性无法被识别。

可行解决方案 #

修改JS代码，通过类选择器批量处理元素，并使用正确的属性命名方式设置样式，以下是两种可靠实现：

方式1：通过DOM Style对象设置（驼峰命名）

function applySVGStyles() {
    // 处理所有.canvas类元素
    document.querySelectorAll('.canvas').forEach(el => {
        el.style.background = '#CCCCCC';
        el.style.clipRule = 'evenodd';
        el.style.fillRule = 'evenodd';
        el.style.imageRendering = 'optimizeQuality';
        el.style.shapeRendering = 'geometricPrecision';
        el.style.textRendering = 'geometricPrecision';
    });

    // 处理所有.path类元素
    document.querySelectorAll('.path').forEach(el => {
        el.style.fill = '#FFFFFF';
        el.style.stroke = '#999999';
        el.style.strokeWidth = '118';
    });

    // 处理所有.rect类元素
    document.querySelectorAll('.rect').forEach(el => {
        el.style.fill = '#00CC00';
        el.style.stroke = '#333333';
        el.style.strokeWidth = '118';
    });

    // 处理所有.trans类元素
    document.querySelectorAll('.trans').forEach(el => {
        el.style.fill = 'transparent';
        el.style.stroke = 'transparent';
    });
}

window.onload = applySVGStyles;

方式2：通过SVG元素原生属性设置（短横线命名）

部分SVG样式属性同时是元素的原生属性，可直接用setAttribute设置，更贴合SVG原生特性：

function applySVGStyles() {
    // 处理所有.canvas类元素
    document.querySelectorAll('.canvas').forEach(el => {
        el.style.background = '#CCCCCC';
        el.setAttribute('clip-rule', 'evenodd');
        el.setAttribute('fill-rule', 'evenodd');
        el.style.imageRendering = 'optimizeQuality';
        el.style.shapeRendering = 'geometricPrecision';
        el.style.textRendering = 'geometricPrecision';
    });

    // 处理所有.path类元素
    document.querySelectorAll('.path').forEach(el => {
        el.setAttribute('fill', '#FFFFFF');
        el.setAttribute('stroke', '#999999');
        el.setAttribute('stroke-width', '118');
    });

    // 处理所有.rect类元素
    document.querySelectorAll('.rect').forEach(el => {
        el.setAttribute('fill', '#00CC00');
        el.setAttribute('stroke', '#333333');
        el.setAttribute('stroke-width', '118');
    });

    // 处理所有.trans类元素
    document.querySelectorAll('.trans').forEach(el => {
        el.setAttribute('fill', 'transparent');
        el.setAttribute('stroke', 'transparent');
    });
}

window.onload = applySVGStyles;

关键注意点 #

• 两种方式均无需启用CSP的unsafe-inline或data:选项，完全符合安全要求；
• 对于image-rendering、shape-rendering这类纯CSS属性，只能通过style对象设置，无法用setAttribute；
• 若SVG元素数量极大，querySelectorAll结合forEach的性能足够应对，无需额外优化。

内容的提问来源于stack exchange，提问作者Shell