我知道有很多方法可以在 HTML 中使用 SVG 精灵。我对这个日期的偏好是使用类似的东西
<div class="container">
<svg class="icon">
<title>Icon Title</title>
<use xlink:href="/svg/sprite.svg#icon"/>
</svg>
</div>
Run Code Online (Sandbox Code Playgroud)
但是,现在我想从子域加载精灵,如下所示:
<div class="container">
<svg class="icon">
<title>Icon Title</title>
<use xlink:href="https://sub.domain.com/svg/sprite-home.svg#icon"/>
</svg>
</div>
Run Code Online (Sandbox Code Playgroud)
不幸的是,这不起作用,因为未获取文件。我也试过<object>,但这似乎也不起作用。
到目前为止,我只能使用
<?php include_once("https://sub.domain.com/svg/sprite.svg"); ?>
Run Code Online (Sandbox Code Playgroud)
可以作为快速修复,因为这不涉及太多重构。然而,这也意味着 HTML 变得臃肿。
使用该<use>方法,精灵被缓存。但是使用该include方法,精灵不会被缓存,只会被嵌入,因此它远非理想。
有没有人使用与跨域请求和浏览器缓存兼容的 php include 方法的任何替代方法?
根据nodeJS docs(v5.10.0)的Readable流:
readable.setEncoding('utf8')与直接使用来处理缓冲区相比,使用更好buf.toString(encoding)。这是因为否则可能会损坏“多字节字符(...)。如果要以字符串形式读取数据,请始终使用此方法。
我的问题是关于如何使用新的Transform流API来实现此目标。现在无需遍历继承详细方法。
因此,例如,这可以用作将stdin转换为大写字符串的方式
const transform = require("stream").Transform({
transform: function(chunk, encoding, next) {
this.push(chunk.toString().toUpperCase());
next();
}
});
process.stdin.pipe(transform).pipe(process.stdout);
Run Code Online (Sandbox Code Playgroud)
但是,这似乎与不使用toString()on缓冲区的建议背道而驰。我尝试通过将编码设置为“ utf-8”来修改Transform实例,如下所示:
const transform = require("stream").Transform({
transform: function(chunk, encoding, next) {
this.push(chunk.toUpperCase()); //chunk is a buffer so this doesn't work
next();
}
});
transform.setEncoding("utf-8");
process.stdin.pipe(transform).pipe(process.stdout);
Run Code Online (Sandbox Code Playgroud)
经检查,transform第一种情况下的编码为空,而第二种情况下的编码确实已更改为“ utf-8”。但是,传递给转换函数的块仍然是缓冲区。我以为可以通过设置编码toString()方法来跳过,但事实并非如此。
我也尝试read像Readable和Duplex示例中那样扩展方法,但这是不允许的。
有办法摆脱toString()吗?