New issue
Advanced search Search tips

Issue 725578 link

Starred by 1 user
Status: Duplicate
Merged: issue 721167
Owner: ----
Closed: May 2017
Cc:
schenney@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

SVG fill

Reported by yasinyaq...@gmail.com, May 23 2017 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

Steps to reproduce the problem:
1. reference svg element as fill parameter for the current svg. 

You can see the id of the svg matches the Linear Gradient. 

<svg class="icon medium" style="fill: url(#28de3228-bea9-40a8-9705-4e741fbd7fb3) !important;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/sprites/svg/sprite.symbol.svg#star-rating"></use>
        <defs>
            <linearGradient id="28de3228-bea9-40a8-9705-4e741fbd7fb3" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(26,96,183);stop-opacity:1"></stop>
                <stop offset="20.000000000000014%" style="stop-color:rgb(26,96,183);stop-opacity:1"></stop>
                <stop offset="20.000000000000014%" style="stop-color:rgb(200,200,200);stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:rgb(200,200,200);stop-opacity:1"></stop>
            </linearGradient>
        </defs>
        </svg>

What is the expected behavior?
It is supposed to show the liner gradient as the fill for svg. This works in previous versions of chrome. 

What went wrong?
Chrome doesn't show the gradient as the background. The svg is rendered blank. 

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 58  Channel: n/a
OS Version: 10
Flash Version:

Comment 1 by yasinyaq...@gmail.com, May 23 2017 

This is happening on both Mac and PC.

Comment 2 by schenney@chromium.org, May 23 2017

Labels: Needs-Feedback
NextAction: 2017-06-05
Firefox doesn't draw anything for the test case I created from your example. Could you provide an explicit test file or link that you expect to work, and tell us which browser it does work in?

Comment 3 Deleted

Project Member

Comment 4 by sheriffbot@chromium.org, May 23 2017

Cc: schenney@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "schenney@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 5 by f...@opera.com, May 23 2017 

This looks like a dupe of  issue 721167 .

Comment 6 by schenney@chromium.org, May 23 2017

Labels: Needs-Feedback
Yes, it's probably a dupe of that. The test case was there for a little while but now it's gone again.

yasinyaqoobi@, can you try Chrome Canary and verify that this has been fixed?

Comment 7 by yasinyaq...@gmail.com, May 23 2017 

Here is the full svg. It works on firefox, chrome, safari, IE. It also works on previous version of chrome. It just doesn't work on chrome 58. 

Here is the url to test: http://stag.daridictionary.org/images/test.html

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Set Stuff with JS[add your bin description]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style type="text/css">
.svg-rating{
  display: inline-block;
}

.icon{
    display: inline-block;
    fill: #000;
    vertical-align: middle;
    width: 1.25rem;
    height: 1.25rem;
}

.icon.medium{
    height: 1.5rem;
    width: 1.5rem;
}

.svg-rating svg {
    margin-right: -5px;
}
</style>
<body>
<span class="svg-rating" style="">
    <svg class="icon medium" style="fill: rgb(26,96,183) !important"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://stag.daridictionary.org/images/sprite.symbol.svg#star-rating"></use></svg>
    <svg class="icon medium" style="fill: rgb(26,96,183) !important"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://stag.daridictionary.org/images/sprite.symbol.svg#star-rating"></use></svg>
    <svg class="icon medium" style="fill: rgb(26,96,183) !important"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://stag.daridictionary.org/images/sprite.symbol.svg#star-rating"></use></svg>
    <svg class="icon medium" style="fill: rgb(26,96,183) !important"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://stag.daridictionary.org/images/sprite.symbol.svg#star-rating"></use></svg>
    <svg class="icon medium" style="fill: url(#b5f54e96-c65d-4598-b894-110deadf27aa) !important;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://stag.daridictionary.org/images/sprite.symbol.svg#star-rating"></use>
      <defs>
        <linearGradient id="b5f54e96-c65d-4598-b894-110deadf27aa" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(26,96,183);stop-opacity:1"></stop>
          <stop offset="20.000000000000014%" style="stop-color:rgb(26,96,183);stop-opacity:1"></stop>
          <stop offset="20.000000000000014%" style="stop-color:rgb(200,200,200);stop-opacity:1"></stop>
          <stop offset="100%" style="stop-color:rgb(200,200,200);stop-opacity:1"></stop>
        </linearGradient>
      </defs>
    </svg>
</span>

</body>
</html>

Comment 8 Deleted

Comment 9 Deleted

Project Member

Comment 10 by sheriffbot@chromium.org, May 23 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "schenney@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 11 by schenney@chromium.org, May 23 2017

Mergedinto: 721167
Status: Duplicate (was: Unconfirmed)
The given test url works fine in trunk and M-59, so it probably is https://bugs.chromium.org/p/chromium/issues/detail?id=721167

Comment 12 by yasinyaq...@gmail.com, May 23 2017 

Does this mean it will be fixed in the next version of chrome? Is there anything we can do to fix it in the meantime ?

Comment 13 by f...@opera.com, May 23 2017 

I'm afraid there are no good workarounds for this (inlining the "sprite sheet" should work.) You could lessen the blow by specifying a fallback color. (Like "fill: url(#...) rgb(...)".)

Comment 14 by schenney@chromium.org, May 23 2017 

Yes, the fix will roll out in the M-59 Chrome Stable. Right now it is in Chrome Beta, Dev and Canary.

M-59 will hit the stable channel early in June.

Comment 15 by yasinyaq...@gmail.com, May 23 2017 

Thank you.

Comment 16 by monor...@bugs.chromium.org, Jun 5 2017 

The NextAction date has arrived: 2017-06-05

Comment 17 by schenney@chromium.org, Jun 5 2017

NextAction: ----
Chrome M-59 Stable is scheduled to start rolling out this week. That does not mean you will see an update immediately, as we roll out in a staggered fashion and we may pause if significant bugs arise.
►

Sign in to add a comment