Applying a Fill / Gradient to a "Native" svg shape

3 Replies
2 Participants

Created by
JJ Jim Jacobs

Platform
ASP.NET Web Forms

Platform
ASP.NET Web Forms

Control
Diagram

Created On
Nov 12, 2014 05:28 PM UTC

Last Activity On
Nov 24, 2014 01:07 PM UTC

Want to subscribe?
SIGN IN

Hi,

This is really a continuation of another thread that was getting rather long.
I now have a working shape that renders fine in my palette based on the following SVG code that is placed in the aspx page.
There are 2 problems:

Once the shape is dropped on the canvas, applying a fill colour only affects the gear in the upper left corner. I would like to affect only the white space inside the rectangle.
The dropped shape is 80X80, although the SVG specifies 100X150

Here's the SVG:

<svg style="display:none"
        xmlns="http://www.w3.org/2000/svg"
        width="150"
        height="100">
     <g
             transform="translate(0,-952.36218)"
            id="layer1">
       <g
                transform="translate(-14.4002114,-962.0501586)"
                id="g3241">
                <rect
                    width="136.20007"
                    height="80.200073"
                     ry="9.5970793"
                    x="15"
                    y="962.36218"
                    style="fill: #ffffff; stroke: #58595b; stroke-width: 0.79992712; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />
                <g
                    transform="translate(13.154221,956.3659)"
                    id="g4564">
                    <path
                        d="m 33.440006,20.624986 -2.222,-2.223 c -2.328,1.108 -4.94,0.027 -5.805,-2.402 h -3.141 c -0.862,2.43 -3.474,3.511 -5.801,2.402 l -2.223,2.223 c 1.106,2.328 0.024,4.94 -2.404,5.804 v 3.143 c 2.429,0.863 3.511,3.476 2.404,5.804 l 2.223,2.223 c 2.327,-1.108 4.939,-0.027 5.801,2.402 h 3.141 c 0.864,-2.43 3.477,-3.511 5.805,-2.402 l 2.222,-2.223 c -1.106,-2.328 -0.024,-4.94 2.404,-5.804 v -3.143 c -2.428,-0.864 -3.51,-3.476 -2.404,-5.804 z m -9.596,13.466 c -3.358,0 -6.089,-2.733 -6.089,-6.091 0,-3.358 2.731,-6.091 6.089,-6.091 3.361,0 6.093,2.733 6.093,6.091 0,3.358 -2.732,6.091 -6.093,6.091 z"
                        id="path6435"
                        style="fill: #58595b" />
                    <circle
                        cx="255.845"
                        cy="284"
                        r="3"
                        transform="translate(-231.99999,-256.00001)"
                        id="circle6437"
                        style="fill: #58595b" />
                </g>
           </g>
         </g>
    </svg>

Am I doing something wrong, or have I uncovered a bug?
I have 2 screenshots; one showing the fill issue (I have resized the shape manually in this shot), and the second showing the size issue.

Thanks

Jim

Attachment: Syncfusion__Fill_Issue_3f1b4431.zip

3 Replies

SG Shyam G Syncfusion Team November 13, 2014 01:31 PM UTC

Hi Jim

Thanks for using Syncfusion products.

Query

Response

Once the shape is dropped on the canvas, applying a fill color only affects the gear in the upper left corner. I would like to affect only the white space inside the rectangle.

please note that we have an property of fill color for node which sets the color for the parent element. The child element inherits color from the parent element. you have set an inline style for an child element, so it inherits from the parent element. We suggest you to set an inline style for an parent element. We have provided the code snippet below with your old SVG content and Modified New SVG content.

Old SVG content:

xmlns="http://www.w3.org/2000/svg"

width="150"

height="100">

transform="translate(0,-952.36218)"

id="layer1">

transform="translate(-14.4002114,-962.0501586)"

id="g3241">

<rect

width="136.20007"

height="80.200073"

ry="9.5970793"

x="15"

y="962.36218"

style=" fill:none;stroke: #58595b; stroke-width: 0.79992712; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />

transform="translate(13.154221,956.3659)"

id="g4564">

<path

d="m 33.440006,20.624986 -2.222,-2.223 c -2.328,1.108 -4.94,0.027 -5.805,-2.402 h -3.141 c -0.862,2.43 -3.474,3.511 -5.801,2.402 l -2.223,2.223 c 1.106,2.328 0.024,4.94 -2.404,5.804 v 3.143 c 2.429,0.863 3.511,3.476 2.404,5.804 l 2.223,2.223 c 2.327,-1.108 4.939,-0.027 5.801,2.402 h 3.141 c 0.864,-2.43 3.477,-3.511 5.805,-2.402 l 2.222,-2.223 c -1.106,-2.328 -0.024,-4.94 2.404,-5.804 v -3.143 c -2.428,-0.864 -3.51,-3.476 -2.404,-5.804 z m -9.596,13.466 c -3.358,0 -6.089,-2.733 -6.089,-6.091 0,-3.358 2.731,-6.091 6.089,-6.091 3.361,0 6.093,2.733 6.093,6.091 0,3.358 -2.732,6.091 -6.093,6.091 z"

id="path6435"

style="fill: #58595b" />

<circle

cx="255.845"

cy="284"

r="3"

transform="translate(-231.99999,-256.00001)"

id="circle6437"

style="fill: #58595b" />

</g>

</svg>

New SVG content

xmlns="http://www.w3.org/2000/svg"

width="150"

height="100">

transform="translate(0,-952.36218)"

id="layer1" fill="none">

transform="translate(-14.4002114,-962.0501586)"

id="g3241">

<rect

width="136.20007"

height="80.200073"

ry="9.5970793"

x="15"

y="962.36218"

style="stroke: #58595b; stroke-width: 0.79992712; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />

transform="translate(13.154221,956.3659)"

id="g4564">

<path

id="path6435"

style="fill: #58595b" />

<circle

cx="255.845"

cy="284"

r="3"

transform="translate(-231.99999,-256.00001)"

id="circle6437"

style="fill: #58595b" />

</g>

</svg>

The dropped shape is 80X80, although the SVG specifies 100X150

Please note that the nodes rendered in the palette is based on the node width and height. The width and height defined in the SVG content will not be considered.

Example of SVG content: <svg

xmlns=http://www.w3.org/2000/svg

<%--the below width and height will not be considered--%> width="150"

height="100"></svg>

When we drag and drop the node from palette onto the canvas, the node width and height will be set on the basis of preview width and preview height of the symbol palette which was used internally. We suggest you to use "drop" event to change the Node's "Width" and "Height" and this event triggered when the node is dropped inside the diagram area(canvas). Please see the code snippet below of drop event used in the diagram builder

diagram.model.drop = nodeondrop;

function nodeondrop(args) {

}

Please let me know if any concerns.

Regards,

Shyam G

JJ Jim Jacobs November 21, 2014 08:41 PM UTC

Hi Shyam,

Thanks for your reply.
I have got fill working per your recommendation, but gradient is NOT - at least for some of our shapes.
Here are 2 relatively simple shapes. The first is simply a rectangle; the second is a rectangle with a small icon in the upper left corner.
Both fill & gradient work for the first one.
Only fill works for the 2nd one - the gradient is not applied.

Here's the svg from my aspx page:

The one that works:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">
        <g id="Task" fill="#fff">
            <rect width="116.8624" height="56.862396" ry="6.3970194" x="1.5623406" y="1.5817947" style="stroke: #58595b; stroke-width: 1.5; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />
        </g>
    </svg>

The one that DOES NOT work:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">
        <g id="BusinessRule" fill="#fff">
            <rect width="118.47024" height="58.47023" ry="6.5779014" x="0.76215363" y="0.76514602" style="stroke: #58595b; stroke-width: 1.5; stroke-miterlimit: 4; stroke-opacity: 1; stroke-dasharray: none" />
            <path d="M 6.9997817,6.9915864 V 10.627951 21.537042 H 26.999782 V 10.627951 6.9915864 H 6.9997817 z M 26.090691,7.9006774 V 9.7188595 H 13.363419 V 7.9006774 h 12.727272 z m -18.1818186,0 H 12.454328 V 9.7188595 H 7.9088723 V 7.9006774 z m 4.5454556,2.7272736 v 4.545454 H 7.9088723 v -4.545454 h 4.5454557 z m -4.5454556,5.454545 h 4.5454556 v 4.545455 H 7.9088723 v -4.545455 z m 5.4545466,4.545455 v -4.545455 h 12.727272 v 4.545455 H 13.363419 z M 26.090691,15.173405 H 13.363419 v -4.545454 h 12.727272 v 4.545454 z" style="fill: #58595b" />
        </g>
    </svg>

Thanks for your assistance.

Jim

SG Shyam G Syncfusion Team November 24, 2014 01:07 PM UTC

Hi Jim

Thanks for your update.

We have applied fill color, gradient for the SVG native node that you have provided and it is working fine at our end. However we have analyzed your SVG content and found that border color is not applied to the node because the stroke is applied as inline in your SVG content. Now, we have fixed that issues by removing the inline stroke in the SVG content which is highlighted below and we have provided the modified SVG content below. Could you please check in the below sample and get back to us if your still facing issues at your end?. We have provided sample and video below for your references.

SVG content: