要在AMP项目中使用带有指向另一页的xlink的SVG文件,可以按照以下步骤操作:
svg-embed.js的JavaScript文件,将以下代码添加到该文件中:const { parse } = require('svg-parser');
const { transform } = require('camelize-css');
const fs = require('fs');
const svgEmbed = (svgPath) => {
const svgFile = fs.readFileSync(svgPath, 'utf8');
const svg = parse(svgFile);
const xlinkAttributes = svg.children.reduce((acc, child) => {
if (child.properties && child.properties.attributes) {
const attributes = child.properties.attributes;
Object.entries(attributes).forEach(([key, value]) => {
if (key.startsWith('xlink:')) {
acc[key] = value;
}
});
}
return acc;
}, {});
const transformedSvg = JSON.stringify(svg, transform(xlinkAttributes));
return transformedSvg;
};
module.exports = svgEmbed;
npm install svg-parser camelize-css fs
svgEmbed函数,并将SVG文件路径作为参数传递给它:const svgEmbed = require('./svg-embed');
const svg = svgEmbed('path/to/your/svg/file.svg');
const sanitizedSvg = amp.htmlSanitizer.sanitizeSvg(svg);
// 在需要显示SVG的地方插入sanitizedSvg
通过这些步骤,你可以将带有指向另一页的xlink的SVG文件嵌入到AMP项目中。请确保正确设置SVG文件的路径,并按照需要调整代码。