我需要从HTML元素中提取特定属性。 这是SVG元素，并且具有剪切路径作为属性。我需要用自定义的剪切路径替换html随附的剪切路径。我该怎么办。
我的外部HTML看起来像这样：
<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
....
</svg>
</div>
我想将整个HTML中的clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1/2/3...)替换为clip-path="url(#ac_clip_1/2/3..)
任何注意将不胜感激。
答案 0 :(得分：2)
要检索具有属性的元素，请对包含的元素执行.querySelectorAll('[clip-path]')。
然后遍历所有元素，并对所有剪切路径属性值进行.replace(/^.*#/, '#')。
答案 1 :(得分：1)
我们可以在DOM上使用setAttribute。
如果您要在具有特定ID的路径上执行此操作，则可以使用getElementById。
document.getElementById("68").setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
一个更优雅的解决方案是使用getElementsByTagName替换它们，以防替换字符串不唯一。如果您的剪辑路径具有增量ID，则可以使用foreach中提供的index变量来相应地操作替换URL。
var allPaths = document.getElementsByTagName("path");
allPaths.forEach(function(element, index){
element.setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
});
答案 2 :(得分：1)
演示中评论的详细信息
/*
Collect all <path>s -- that have the [clip-path] attribute that
has the value of "url" anywhere within it -- into a NodeList.
*/
var paths = document.querySelectorAll('path[clip-path*=url]');
/*
On each loop through the NodeList...
...use .setAttributeNS() to change the value of [clip-path]
attribute...
...and modify the value by incrementing the last char by index +1
*/
for (let i = 0; i < paths.length; i++) {
paths[i].setAttributeNS(null, 'clip-path', `url(#ac_clip_${(i + 1)})`);
console.log(`path#${paths[i].id}[clip-path="${ paths[i].getAttributeNS(null, 'clip-path')}"]`);
}<p>Use Developer Tools to verify new [clip-path] values.</p>
<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="70" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_3)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
</svg>
</div>