Svg <line> element with filter isn't rendered

Confirmed Issue #2996522 • Assigned to Rossen A.

Details

Created
May 29, 2015
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

URL :http://jsfiddle.net/xe5zhn19/

Repro Steps:

Save this to .html file and open in Internet Explorer 11\Edge:
Or load http://jsfiddle.net/xe5zhn19/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<svg version="1.1" width="100%" height="100%">
<filter id="fil1" x="0" y="0" width="100%" height="100%"
filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0"></feFuncR>
<feFuncG type="discrete" tableValues="0"></feFuncG>
<feFuncB type="discrete" tableValues="254"></feFuncB>
</feComponentTransfer>
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
<feOffset result="offsetBlur" dx="30" dy="30"></feOffset>
<feComposite operator="over" in="SourceGraphic" in2="offsetBlur"></feComposite>
</filter>
<line x1="0" y1="5" x2="100%" y2="15"
vector-effect="non-scaling-stroke"
style="stroke: rgb(128, 128, 128); stroke-width: 10px;" filter="url(#fil1)" >
</line>
</svg>
</body>
</html>

Expected Results:

Svg <line> element is rendered.

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “IE S.”

      Changed Status to “Won’t fix”

      Changed Assigned To to “Rossen A.”

      Changed Status from “Won’t fix”

      Changed Status to “Confirmed”

    • I have a similar issue where a simple vertical line with a feGaussianBlur is not displayed. While this appear to be correct according to the spec “Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line…” specifying filterUnits="userSpaceOnUse" does not correct the problem in Edge although it does in other browsers such as Chrome.

    • For me, removing the feComponentTransfer filter element makes the line appear. Conversely, if only that filter primitive is applied, the line is not rendered.

    You need to sign in to your Microsoft account to add a comment.

    Sign in