Applying a gradient to a path shape causes it to turn black

[Jim Jacobs]

Hi,

As you know, we've been converting our "native" svg images to single path shapes.
We're encountering something strange when applying a gradient to these shapes.
I can fill them just fine, however when you subsequently attempt to apply a gradient the shape becomes filled with black.

Watch the attached video to see the behaviour in action.

Here's the code snippet that creates the shape:

        Node SendTask = CreateNodes("Send Task",
            "M114-0.25H6c-3.313,0-6,2.687-6,6v48c0,3.312,2.687,6,6,6h108c3.312,0,6-2.688,6-6v-48 C120,2.437,117.312-0.25,114-0.25z M23.186,5.917l-7.978,6.44L7.23,5.917H23.186z M24,17H6.417V6.545l8.791,7.097L24,6.545V17z",
            "white");

Is there something wrong with our path data, or have I uncovered a bug in the Diagram Builder?

Thanks for investigating.

Jim

Attachment: Syncfusion__Applying_Gradient_Causes_Shape_to_Turn_Black__02Dec2014_ce13e71d.zip

[Shyam G]

Hi Jim

Thanks for using Syncfusion products.

Please note that you have defined node’s name with whitespace. We suggest you to remove the whitespace for the node’s name. We have modified your code snippet and provided below.

CreateNodes("SendTask","M114-0.25H6c-3.313,0-6,2.687-6,6v48c0,3.312,2.687,6,6,6h108c3.312,0,6-2.688,6-6v-48 C120,2.437,117.312-0.25,114-0.25z M23.186,5.917l-7.978,6.44L7.23,5.917H23.186z M24,17H6.417V6.545l8.791,7.097L24,6.545V17z","white");

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

The term "whitespace" through me until I realized you were referring to the "blank" in the node's name.
Yes, that fixes the issue.
Strange restriction though!

Thanks

Jim

[Shyam G]

Hi Jim

Thanks for the update.

Please note that while defining the name for HTML elements, certain procedures are to be followed. Please see the link below

Link:http://stackoverflow.com/questions/5688200/can-i-use-white-spaces-in-the-name-attribute-of-an-html-element

Link1:http://www.w3.org/TR/html401/types.html#type-name

However we will update you with more information in one business day(12/8/2014).

Please let me know if any concerns.

Regards,

Shyam G

[Shyam G]

Hi Jim

 

Thanks for your patience.

 

Please note that we don’t specify a “whitespace” for an “id” attribute of HTML 5 elements. Please refer the below link for more details.

 

Link: http://www.w3.org/TR/html5/dom.html#the-id-attribute

 

Screenshot:

 

By default, we assign the node’s name to the  “id” of an SVG element while rendering the nodes. Due to certain restriction of an “id” attribute which we have shown above in the screenshot and link, we suggest you to define a node’s name without “whitespace”

 

Please let me know if any concerns.

 

Regards,

Shyam G

[Shyam G]

Hi Jim

 

Please ignore our previous update.

 

Please note that we don’t specify a “whitespace” for an “id” attribute of HTML 5 elements. Please refer the below link and image for more details.

 

Link: http://www.w3.org/TR/html5/dom.html#the-id-attribute

 

Image: http://www.syncfusion.com/downloads/support/directtrac/general/whitespace1585560980.zip

 

By default, we assign the node’s name to the  “id” of an SVG element while rendering the nodes. Due to certain restriction of an “id” attribute which we have shown above in the image and link, we suggest you to define a node’s name without “whitespace”

 

Please let me know if any concerns.

 

Regards,

Shyam G