如何将 URL 转换为 SVG 图像的 HREF答案

【问题标题】：How to conver URL to HREF for SVG Image如何将 URL 转换为 SVG 图像的 HREF
【发布时间】：2018-12-18 09:36:37
【问题描述】：

如何将 amazon presigned url 转换为 svg 图像的正确 href 属性值？

例如，我这里有一个url：

https://s3.us-east-1.amazonaws.com/zed-content/Dialogue%20Items/a0A1r00002sLxg9EACLeft/testImg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJ7V4MJWO3GNAM6WA%2F20180710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180710T133927Z&X-Amz-Expires=604800&X-Amz-Signature=1044208e8a3fc4167fcd738637316d31a6b9a843063ec5658f8e7720c8963fb0&X-Amz-SignedHeaders=host

它的 url 显示一个图像，但我不知道如何将位于 url 后面的图像作为 svg 图像。

我正在使用 .jpg 扩展名存储图像。现在我想获取该图像的href，以便使用图像 svg 元素显示它。

换句话说，我想要类似的东西

<svg>
  <image href="IDoNotKnowWhatToPutInHere.jpg"/>
</svg>

【问题讨论】：

链接中的图片以jpg格式保存。要将图像显示为 svg，您需要先将其存储为 svg 格式。
@Dunedan，我编辑了问题以反映您在说什么。谢谢。
您是否尝试将整个预签名 URL 放入 href 字段？
@MarkB 作为一个 Mark B 到另一个我可以确认它就像一个魅力。

标签： image amazon-web-services url svg href

【解决方案1】：

你可以这样做。根据自己的喜好更改宽度和高度。

.svg-main,
.svg-image {
  width: 200px;
  height: 200px;
}

<svg class="svg-main">
  <image class="svg-image" href="https://s3.us-east-1.amazonaws.com/zed-content/Dialogue%20Items/a0A1r00002sLxg9EACLeft/testImg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJ7V4MJWO3GNAM6WA%2F20180710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180710T133927Z&X-Amz-Expires=604800&X-Amz-Signature=1044208e8a3fc4167fcd738637316d31a6b9a843063ec5658f8e7720c8963fb0&X-Amz-SignedHeaders=host"/>
</svg>

【讨论】：

您应该使用xlink:href 来向后兼容 SVG1.1。
除了xlink:href，还必须设置width和height属性才能支持SVG1.1（不能通过CSS设置）