/ 设置 10 秒超时 // 每日统计清 0 runtime_set('todaycomments', 0); runtime_set('todayarticles', 0); runtime_set('todayusers', 0); if ($forumlist) { $fidarr = array(); foreach ($forumlist as $fid => $forum) { $fidarr[] = $forum['fid']; } forum_update($fidarr, array('todayposts' => 0, 'todaythreads' => 0)); } // 清理临时附件 attach_gc(); // 当天24点 $today = strtotime(date('Ymd')) + 86400; runtime_set('cron_2_last_date', $today, TRUE); // 往前推8个小时，尽量保证在前一天 升级过来和采集的数据会很卡 // table_day_cron($time - 8 * 3600); cache_delete('cron_lock_2'); } } } ?>javascript - SVG fill="url(#foo)" disappears when SVGs are loaded dynamically - Stack Overflow|Concepts Of Algorithm
  2. Algorithm
  3. javascript - SVG fill="url(#foo)" disappears when SVGs are loaded dynamically - Stack Overflow

javascript - SVG fill="url(#foo)" disappears when SVGs are loaded dynamically - Stack Overflow

admin2025-04-09  3

I am loading different SVGs dynamically within a web application built in AngularJS, I am also altering the opacity of layers within the SVGs. These SVGs have some paths with the fill pattern property as such

<defs>
  <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272">
    <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/>
  </pattern>
</defs>

<rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>

This all works great at first- however under some conditions these # fills simply disappear:

-

Condition 1: If I were to switch to another SVG and back.

Result:: The # fill is still visible.

-

Condition 2: If I were to alter the opacity of the element with the # fill.

Result:: The # fill is still visible.

-

Condition 3: If I were to both switch to another SVG & alter the opacity of the element with the # fill.

Result:: The # fill bees invisible.

-

This is to mean the styles all appear to still be applied normally in the code- but there is no actual visible fill to be seen. This behaviour exists as far as I can see in Chrome and slightly differently in Safari. Firefox seems to be immune.

I've tried manually flicking the element to another fill and back in the browser to see if perhaps something had cached, no luck. I still think this may somehow be the case, with how the # refers to an inline pattern defined in the <defs> which may not have been loaded yet by the AJAX but the cached CSS rule still floating around.

If it helps matters, both SVGs that I am switching between both have the same <defs> and CSS styling applied. Is perhaps the double case of the defined pattern causing an issue?

I am loading different SVGs dynamically within a web application built in AngularJS, I am also altering the opacity of layers within the SVGs. These SVGs have some paths with the fill pattern property as such

<defs>
  <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272">
    <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/>
  </pattern>
</defs>

<rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>

This all works great at first- however under some conditions these # fills simply disappear:

-

Condition 1: If I were to switch to another SVG and back.

Result:: The # fill is still visible.

-

Condition 2: If I were to alter the opacity of the element with the # fill.

Result:: The # fill is still visible.

-

Condition 3: If I were to both switch to another SVG & alter the opacity of the element with the # fill.

Result:: The # fill bees invisible.

-

This is to mean the styles all appear to still be applied normally in the code- but there is no actual visible fill to be seen. This behaviour exists as far as I can see in Chrome and slightly differently in Safari. Firefox seems to be immune.

I've tried manually flicking the element to another fill and back in the browser to see if perhaps something had cached, no luck. I still think this may somehow be the case, with how the # refers to an inline pattern defined in the <defs> which may not have been loaded yet by the AJAX but the cached CSS rule still floating around.

If it helps matters, both SVGs that I am switching between both have the same <defs> and CSS styling applied. Is perhaps the double case of the defined pattern causing an issue?

  • javascript
  • css
  • ajax
  • svg
  • fill
Share Improve this question edited Apr 8, 2017 at 21:05 Mr Lister 46.6k15 gold badges113 silver badges155 bronze badges asked Mar 31, 2017 at 12:30 jmcgroryjmcgrory 8439 silver badges19 bronze badges 3
  • Presumably browser bugs, have you tried reporting them to the appropriate bugtrackers? – Robert Longson Commented Mar 31, 2017 at 13:06
  • @RobertLongson I have found a workaround which would suggest this (answered in question), will report to Chromium etc. when I finish work. – jmcgrory Commented Mar 31, 2017 at 13:17
  • @jmcgrory, chromium developers are still waiting for your feedback crbug./712328 – woxxom Commented Apr 19, 2017 at 15:04
Add a ment  | 

2 Answers 2

Reset to default 4

I had multiple svg elements and problem was the same ID of all pattern tags. So, using different id="" for the pattern tag of each svg element solved my problem with disappearing fill="url()" on dynamic reload...

After some investigation this appears to be an issue with the browsers (Chrome/Safari possibly others) not being able to keep up with rendering fill: url(#) and opacity for the same element at the same time, at least in cases of multiple/dynamically loaded SVGs.

To solve this, apply your opacity css to a containing element around the element that has the fill: url(#), example below:

<defs>
  <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272">
    <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/>
  </pattern>
</defs>
<style>.opacity-class { opacity: 0.33; }</style>
<g class="opacity-class">
  <rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>
</g>

This allows the browser to do both independently and not ruin your pretty pictures.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744203599a235917.html

javascriptSVG fillquoturl(foo)quot disappears when SVGs are loaded dynamicallyStack Overflow

最新回复(0)