We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

117719 Dec 3,2014 02:33 AM UTC Dec 8,2014 09:20 AM UTC ASP.NET Web Forms 5
loading
Tags: Diagram
Jim Jacobs
Asked On December 3, 2014 02:33 AM UTC

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 [Syncfusion]
Replied On December 3, 2014 12:00 PM UTC

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
Replied On December 4, 2014 02:27 PM UTC

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 [Syncfusion]
Replied On December 5, 2014 01:06 PM UTC

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 [Syncfusion]
Replied On December 8, 2014 09:11 AM UTC

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 [Syncfusion]
Replied On December 8, 2014 09:20 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;