Question

背景：

我运行一个快速服务器，其路由指向我的所有静态文件。

在静态文件中，我有一个满是地图.svg的文件夹。

在客户端（React），我获取地图并将它们添加到组件中。

问题：

我需要重写.svg，然后将其添加到路径属性：fill=url(#some_flag)。

之前的

Svg：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1024pt" height="1024pt" viewBox="0 0 1024 1024"
 preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0,1024) scale(0.1,-0.1)"
        fill="#000000" stroke="none">
        <path d="... numbers...-78 -28 -115 "/>
    </g>
</svg>

Svg After：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1024pt" height="1024pt" viewBox="0 0 1024 1024"
 preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0,1024) scale(0.1,-0.1)"
        fill="#000000" stroke="none">
        <path d="... numbers...-78 -28 -115"
         fill="url(#some_flag)"/>  <!--THE ADDED ATTRIBUTE -->
    </g>
</svg>

我心中有几个方向：

纯{Javascript ：setAttribute path，这意味着我必须为每条路径指定一个ID？
以某种方式通过CSS渗透.svg？ 我尝试了它，无法覆盖内联SVG属性

你以前处理过吗（当然你做过......）？我有什么选择？

Answer 1

我认为你已经发现，包括SVG通过img标签是有限的。避免它。

您可以设置一种代理组件来获取SVG内容，将它们转换为JSX，并允许您将SVG内容包含在内。这将允许使用CSS和JavaScript轻松操作它们。

这是一个将处理文件转换为JSX格式的库。

https://www.npmjs.com/package/svg-to-jsx

Answer 2

我正在回答这一部分：＆lt;＆lt; 我有几个方向： 1-纯Javascript：路径的setAttribute，这意味着我必须给每个路径一个id？＆gt;＆gt;。

它可能是最好的解决方案，但我不会使用“ id ”，因为它不够可靠（没有单一保证，如果无意中重复）。你想添加一个属性 fill = “url（#some_flag）”，你的 #some_flag 可能在某处被索引（ flag [i] ），可链接到路径的序列。如果必须从几何计算 #some_flag ，则可以将其预处理为数组，或在运行时计算。 CSS选择器也可能更复杂，具体取决于您的需求。这可以回答你问题的那一部分：

document.querySelectorAll("g > path")
.forEach((x,i) => x.setAttribute("fill",`url(${flag[i]})`));

实际上，我确实用经济学人巨无霸指数（一份本地副本）摘录的svg地图进行了实验：

fetch("./bigMacSvg1.txt", {method:"GET"})
.then(res => res.text())
.then(res => {
    //console.log(res);
    document.querySelector(".here").innerHTML = res; //div for svg
    document.querySelectorAll("path:nth-child(n+2)")
    .forEach(x => x.setAttribute("fill","#a1b2c3"));
})
.catch(err => {console.log(err)});

上面的代码为每个国家设置了浅色，但没有为海洋设置（第一条路径）。

如何在客户端重写从服务器获取的svg文件？

背景：

问题：

Svg：

Svg After：

我心中有几个方向：

2 个答案: