正文 

当前位置： 首页 > 知识 >

在将 svg 转换为 img 中使用 css

     2023-03-06     242

关键词：

【中文标题】在将 svg 转换为 img 中使用 css【英文标题】：Using css in converted svg to img 【发布时间】：2017-12-11 10:07:01 【问题描述】：

我正在尝试将 svg 转换为图像格式。实际上很多工作都很好，我知道如何从 SVG 转换为画布，从画布转换为 img。我的问题是 svg 使用已包含在 css 文件中的 css，并且通过转换为画布，样式将丢失。

有人知道如何将样式复制到我的 svg 或画布中吗？

这是我的代码：https://jsfiddle.net/DaWa/70w9db1d/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>SVG2IMG</title>
    <link rel="stylesheet" href="./circle.css">
</head>
<body>
<svg  >
    <circle cx="50" cy="50" r="40"/>
</svg>

<script>
  var svg = document.querySelector('svg');

  let xml  = new XMLSerializer().serializeToString(svg);
  let data = "data:image/svg+xml;base64," + btoa(xml);
  let img  = new Image();
  img.src  = data;
  document.body.appendChild(img)

</script>

</body>
</html>

还有我的 CSS：

circle 
    fill:red

【问题讨论】：

@JGFMK 该链接页面对 OP 的问题没有帮助。 【参考方案1】：

我使用这个技巧将每个节点的计算样式添加到其样式属性中，并且它有效。也许它可以帮助你。

更新 1： 一些浏览器不支持 cssText 属性，因此您可以使用下面的代码，这有点跨浏览器。

更新 2： Firefox 计算 css 引号属性，其中包括一些 btoa 无法正确编码的无效字符串字符。

let addStyle = function(children) 
   for (let i = 0; i < children.length; i++) 
     let child = children[i];
     if (child instanceof Element) 
       let cssText = '';
       let computedStyle = window.getComputedStyle(child, null);
       for (let i = 0; i < computedStyle.length; i++) 
         let prop = computedStyle[i];
         cssText += prop + ':' + computedStyle.getPropertyValue(prop) + ';';
       
       child.setAttribute('style', cssText);
       addStyle(child.childNodes);
     
   
 

 let svg = document.querySelector('svg');
 addStyle(svg.childNodes);
 let xml = new XMLSerializer().serializeToString(svg);
 let data = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(xml)));
 let img = new Image();
 img.src = data;
 document.body.appendChild(img);
circle 
  fill: red

<svg  >
  <circle cx="50" cy="50" r="40" />
</svg>

【讨论】：

这里存在一些跨浏览器问题。该图像在我的主浏览器（Win64 上的 Firefox/54.0.1）中为黑色，在 Chrome 中为红色。 （边缘在“对象不支持属性或方法'forEach'”时崩溃，但我想这是一个完全不同的问题。）无论如何都是不错的方法。 @ÁlvaroGonzález 是的，我猜，computedStyle 仅适用于 web-kit。我会将此添加到答案中。谢谢提醒。 然而caniuse 显示出相当广泛的支持。也许它只是不适用于 SVG。 @ÁlvaroGonzález 显然其他浏览器不支持 cssText。在 IE 中它返回空字符串。 @user7521838 我用 firefox 解决了这个问题，并确保它适用于 Chrome、IE 和 firefox。如果您在使用其他浏览器时遇到问题，请告诉我

text将img转换为svg(代码片段)

查看详情

在将图像分配给 img 标签之前使用 javascript 调整图像大小

】在将图像分配给img标签之前使用javascript调整图像大小【英文标题】：Resizeimageswithjavascriptbeforeassignthemtoanimgtag【发布时间】：2011-09-0405:58:44【问题描述】：我对HTML和CSS开发非常陌生。我有一个带有img标签的HTML页面。该标签将... 查看详情

CSS 动画不适用于 <img> 中的 svg

】CSS动画不适用于<img>中的svg【英文标题】：CSSanimationdonotworkforsvgin<img>【发布时间】：2018-02-1312:10:50【问题描述】：我正在尝试为图像/对象标签中的SVG设置动画，但它不起作用svgwidth:100%;height:200px;.rotate-45transform-origin:ce... 查看详情

在 CSS 中悬停时更改 img src SVG [重复]

】在CSS中悬停时更改imgsrcSVG[重复]【英文标题】：ChangeimgsrcSVGonhoverinCSS[duplicate]【发布时间】：2020-12-2012:31:46【问题描述】：html:&lt;imgsrc="logo.svg"alt="Logo"class="logo-img"&gt;css:.logo-imgpath:hoverfi 查看详情

在 JavaScript 中将 SVG 转换为 PNG

...injavascript【发布时间】：2020-02-2117:00:24【问题描述】：我在将svg转换为png(base64)时遇到问题。SVG到base64可以正常工作，因为它在浏览器中显示得很好。但是当我尝试加载图像时，它不会加载。有人可能知道为什么？varxml=newXMLSerial... 查看详情

有没有办法使用 Puppeteer 定位特定元素并在将 html 转换为 pdf 时保留 CSS？

】有没有办法使用Puppeteer定位特定元素并在将html转换为pdf时保留CSS？【英文标题】：IsthereawaytotargetaspecificelementusingPuppeteerANDpreservetheCSSwhenconvertinghtmltopdf?【发布时间】：2021-01-2217:58:42【问题描述】：我想将一些html转换为pdf文件... 查看详情

是否可以在 IMG 标签中使用 SVG？

】是否可以在IMG标签中使用SVG？【英文标题】：IsitaccessibletouseSVGinIMGtag?【发布时间】：2021-09-0301:42:51【问题描述】：我有一个SVG图像，我将像这样在我的网站上使用它<imgsrc="test.svg"/>我的问题是，使用带有IMG选择器和“alt”... 查看详情

使用 iText 将 SVG 转换为 PDF，SVG 未在 PDF 中完全显示

】使用iText将SVG转换为PDF，SVG未在PDF中完全显示【英文标题】：ConvertSVGtoPDFwithiText,SVGisnotfullydisplayedinPDF【发布时间】：2021-03-1410:26:35【问题描述】：我正在为PDF页面添加SVG图像。首先，我尝试了SvgConverter.createPDF来检查iText是否适... 查看详情

在 Internet Explorer 9 中使用 SVG 背景图像进行 CSS 2D 转换

】在InternetExplorer9中使用SVG背景图像进行CSS2D转换【英文标题】：CSS2DtransformwithSVGbackground-imageinInternetExplorer9【发布时间】：2012-10-2018:36:07【问题描述】：我只使用一个SVG背景图像创建了一个左右导航按钮，并水平翻转它以获得另... 查看详情

在 ie9 中不遵守 img 元素比例中的 SVG

】在ie9中不遵守img元素比例中的SVG【英文标题】：SVGinimgelementproportionsnotrespectedinie9【发布时间】：2012-04-0408:23:57【问题描述】：CSS：imgmax-height:30px;HTML：<imgsrc="foo.svg"/>我正在寻找这个svg图像以按比例缩放到30像素高的最大高... 查看详情

仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画

】仅在将鼠标悬停在圆圈上时才沿文本路径为SVG文本设置动画【英文标题】：AnimateSVGtextalongatext-pathonlywhenhoveringoveracircle【发布时间】：2018-06-2908:56:11【问题描述】：我想将动画从HTML移动到css。仅当您将鼠标悬停在&lt;circleid=&... 查看详情

在 Python 中将带有嵌入式 CSS 的 SVG 转换为 PDF

】在Python中将带有嵌入式CSS的SVG转换为PDF【英文标题】：ConvertingSVGwithEmbeddedCSStoPDFinPython【发布时间】：2013-01-3122:21:36【问题描述】：我正在尝试使用Python从SVG图像生成PDF图像。我试过CairoSVG和svglib。问题是在这两种情况下生成... 查看详情

为啥在将 unsigned char 转换为有符号数据类型时在汇编中使用 movzbl？

】为啥在将unsignedchar转换为有符号数据类型时在汇编中使用movzbl？【英文标题】：Whymovzblisusedinassemblywhencastingunsignedchartosigneddatatypes?为什么在将unsignedchar转换为有符号数据类型时在汇编中使用movzbl？【发布时间】：2019-10-2410:10:21... 查看详情

使用 PHP 生成 SVG 文件

】使用PHP生成SVG文件【英文标题】：GeneratingSVGfilesusingPHP【发布时间】：2017-05-2510:01:31【问题描述】：所以，我正在尝试为我的用户创建一些标签图像，显示他们获得的总积分。我正在尝试将SVG写入一个php文件中，该文件将添加... 查看详情

我想在外部文件中更改 svg 的颜色并使用 img 标签导入

】我想在外部文件中更改svg的颜色并使用img标签导入【英文标题】：Iwanttochangethecolorofsvgwhileitisinouterfileandimportedwithimgtag【发布时间】：2021-11-0906:02:02【问题描述】：我使用谷歌字体和图标，并将它们保存到主题文件夹中，我知... 查看详情

在 PHP 中使用 Imagick 将 svg 转换为 png 时出现奇怪的裁剪问题

】在PHP中使用Imagick将svg转换为png时出现奇怪的裁剪问题【英文标题】：StrangecroppingissuewhileconvertingsvgtopngusingImagickinPHP【发布时间】：2021-08-1120:10:04【问题描述】：我正在尝试将一堆svg图像转换为png。下面是Imagick部分的sn-p：$im=ne... 查看详情

如何制作图标字体（如何将svg转换为css可用的图标字体）

转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情

如何制作图标字体（如何将svg转换为css可用的图标字体）

转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情