SVG使用标签时完全变黑且缺少一部分。

huangapple
go评论117阅读模式
英文:

SVG using <use> tag appears completely black and missing a part of it

问题

I'm trying to add an SVG to an HTML page with the <use> tag as follows:

  1. <div id="ampoule_container">
  2.     <svg>
  3.         <use href="resources/assets/Ampoule.svg#ampoule"/>
  4.     </svg>
  5. </div>

The problem is that it appears completely black, and a part of it is missing, as shown in this screenshot.

It should look like this: SVG使用<use>标签时完全变黑且缺少一部分。

If I type its path in a browser, it shows up correctly. After checking, no CSS is influencing its color.

My guess is that the <use> tag doesn't support colors, but only shapes. What can I do?

Here is the SVG code made with Adobe Illustrator:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <svg id="ampoule" data-name="ampoule" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 500">
  3.   <defs>
  4.     <style>...</style>
  5.     <clippath id="clippath-4">...</clippath>
  6.     <linearGradient>...</linearGradient>
  7.     <linearGradient>...</linearGradient>
  8.   </defs>
  9.   <g class="cls-10">
  10.     <g id="...">...</g>
  11.     <g id="...">...</g>
  12.     <g id="...">...</g>
  13.     <g id="...">...</g>
  14.   </g>
  15. </svg>
英文:

I'm trying to add a SVG to an HTML page with the &lt;use&gt; tag as following:

  1. &lt;div id=&quot;ampoule_container&quot;&gt;
  2.     &lt;svg&gt;
  3.         &lt;use href=&quot;resources/assets/Ampoule.svg#ampoule&quot;/&gt;
  4.     &lt;/svg&gt;
  5. &lt;/div&gt;

The problem is that it appears completely black, and a part of it is missing like so:

SVG使用<use>标签时完全变黑且缺少一部分。

It should look like this:

SVG使用<use>标签时完全变黑且缺少一部分。

If I type its path in a navigator it shows up correctly. After checking, no CSS is influencing its color.

My guess is that &lt;use&gt; tag doesn't support colors, but only shapes, what can I do ?

Here is the SVG code made with Adobe Illustrator:

  1. &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  2. &lt;svg id=&quot;ampoule&quot; data-name=&quot;ampoule&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 180 500&quot;&gt;
  3.   &lt;defs&gt;
  4.     &lt;style...&gt;
  5.     &lt;clippath id=&quot;clippath-4&quot;&gt;...&lt;/clippath&gt;
  6.     &lt;linearGradient.../&gt;
  7.     &lt;linearGradient.../&gt;
  8.   &lt;/defs&gt;
  9.   &lt;g class=&quot;cls-10&quot;&gt;
  10.     &lt;g id=...&gt;...&lt;/g&gt;
  11.     &lt;g id=...&gt;...&lt;/g&gt;
  12.     &lt;g id=...&gt;...&lt;/g&gt;
  13.     &lt;g id=...&gt;...&lt;/g&gt;
  14.   &lt;/g&gt;
  15. &lt;/svg&gt;

答案1

得分: 0

以下是使用<use>插入的三个SVG，并引用了一个ID。所有SVG都显示一个带有模糊滤镜的橙色圆圈。

我不清楚对此的一般支持情况，但根据我的观察（使用Firefox和Chrome），只有将fill属性定义为属性（fill="orange"）或内联样式（style="fill:orange;"）的SVG才有效。

在所有SVG中，滤镜都在<defs>中定义。因此，我认为问题不是使用滤镜、蒙版或剪辑路径，而只是在<style>中定义CSS样式时出现问题。

刚刚注意到您的SVG中还有渐变。因此，这是一个在<defs>中定义的带有渐变的圆圈。在Firefox中正常工作，但在Chrome或Opera中不正常工作（但总体来说，这些示例在Opera中都不起作用，但我猜这是与数据URL有关的问题）。

希望这有助于您的理解。

英文:

Here are three SVGs inserted using &lt;use&gt; and with reference to an ID. All SVGs display a orange circle with a blur filter.

I don't know about the general support for this, but as I see it (using Firefox and Chrome), only the SVGs with the fill defined as an attribute (fill=&quot;orange&quot;) or inline style (style=&quot;fill:orange;&quot;) on the circle element works.

In all SVGs the filter is defined in &lt;defs&gt;. So, I don't think that the problem is the use of filters, masks or clip paths, but only an issue when you define CSS styles in &lt;style&gt;.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2.   display: flex;
  3.   gap: 10px;
  4. }
  6. svg {
  7.   display: block;
  8.   width: 200px;
  9.   height: 200px;
  10.   border: solid thin black;
  11. }

<!-- language: lang-html -->

  1. &lt;div&gt;
  2.   &lt;p&gt;Circle with fill attribute:&lt;/p&gt;
  3.   &lt;svg&gt;
  4.     &lt;use href=&quot;data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIGZpbGw9Im9yYW5nZSIgZmlsdGVyPSJ1cmwoJyNibHVyJykiLz4KPC9zdmc+CgoK#svg01&quot;/&gt;
  5.   &lt;/svg&gt;
  6. &lt;/div&gt;
  7. &lt;div&gt;
  8.   &lt;p&gt;Circle styled with a CSS property in a &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; element:&lt;/p&gt;
  9.   &lt;svg&gt;
  10.     &lt;use href=&quot;data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICBjaXJjbGUgeyBmaWxsOiBvcmFuZ2U7IH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJibHVyIj4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMCIgZmlsdGVyPSJ1cmwoJyNibHVyJykiLz4KPC9zdmc+CgoK#svg01&quot;/&gt;
  11.   &lt;/svg&gt;
  12. &lt;/div&gt;
  13. &lt;div&gt;
  14.   &lt;p&gt;Circle styles with CSS property in the style attribute:&lt;/p&gt;
  15.   &lt;svg&gt;
  16.     &lt;use href=&quot;data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIHN0eWxlPSJmaWxsOm9yYW5nZTsiIGZpbHRlcj0idXJsKCcjYmx1cicpIi8+Cjwvc3ZnPgoKCg==#svg01&quot;/&gt;
  17.   &lt;/svg&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

Just noticed that you also have gradients in your SVG. So, here is a circle with a gradient defined in &lt;defs&gt;. That works fine in Firefox, but not in Chrome or Opera (but in general the examples does not work in Opera, but I guess that is an issue with data URLs).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2.   display: flex;
  3.   gap: 10px;
  4. }
  6. svg {
  7.   display: block;
  8.   width: 200px;
  9.   height: 200px;
  10.   border: solid thin black;
  11. }

<!-- language: lang-html -->

  1. &lt;div&gt;
  2.   &lt;p&gt;Circle with fill attribute and gradient:&lt;/p&gt;
  3.   &lt;svg&gt;
  4.     &lt;use href=&quot;data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoOTApIj4KICAgICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0ib3JhbmdlIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0ibWFyb29uIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIGZpbGw9InVybCgjZ3JhZGllbnQpIiBmaWx0ZXI9InVybCgnI2JsdXInKSIvPgo8L3N2Zz4KCgo=#svg01&quot;/&gt;
  5.   &lt;/svg&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 10:09:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/76428153.html
  • css
  • html
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定