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. Image for the cookie policy date

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

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:
  1. 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.
  2. 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:

<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:none;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>

 

New SVG content

 

<svg style="display:none"

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

        width="150"

        height="100">

     <g

             transform="translate(0,-952.36218)"

            id="layer1" fill="none">

       <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="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>

 

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:

<svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">

        <g id="Task" fill="#fff" stroke="#58595b">

            <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>

 

    <svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">

        <g id="BusinessRule" fill="#fff" stroke="#58595b">

            <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"  />

        </g>

    </svg>   

Here is the sample

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/DiagramBuilder_sample2065910574_(3)1392064619.zip

Here is the video

Video: https://www.syncfusion.com/downloads/support/directtrac/general/gradient-1563149564.zip

Please let me know if any concerns.

Regards,

Shyam G


Loader.
Live Chat Icon For mobile
Up arrow icon