首页 > 解决方案 > 如何将 URL 转换为 SVG 图像的 HREF

问题描述

如何将 svg 图像转换amazon presigned url为正确的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

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

我正在使用.jpg扩展名存储图像。现在我想得到href图像的,以便使用图像 svg 元素显示它。

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

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

标签: imageamazon-web-servicesurlsvghref

解决方案


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

.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>


推荐阅读