Loading ...
Sorry, an error occurred while loading the content.

Problem with Units of SVG

Expand Messages
  • Alireza
    hello I have an asp.net page which contains auto generated svg shapes. shape is always a rectangle which is filled in gray and 20 color lines as stripes cover
    Message 1 of 3 , Feb 28 2:24 AM
    • 0 Attachment
      hello

      I have an asp.net page which contains auto generated svg shapes. shape is always a rectangle which is filled in gray and 20 color lines as stripes cover a part of this rectangle.

      Problem:
      sometimes stroke width is a fractional number less than 1 according to calculations. In such cases the stripes aren't shown if units are in pixel. I changed units of lines to Cm so that fractional numbers are also rendered. This worked but we can not define unit for polygon the same way.
      Then I tried to define the outer svg "width" and "height" properties in Cm units so that every thing is shown in CM, then polygon and stripe lines are scaled and no more proportional. could you please help?



      this is a sample of svg tag in browser after rendering:

      <svg xmlns="http://www.w3.org/2000/svg" id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1_SVG" viewBox="-20.4572 -2.4845 24.2 12.1" width="10cm" height="10cm" ZoomFactor="1.1">
      <g id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1_SVG_TopMostGroup" transform="scale(1 -1)">
      <polygon id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-1" visibility="visible" fill="gray" fill-rule="inherit" stroke="black" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="0.5%" points="10,5 -10,5 -10,-5 10,-5" externalResourcesRequired="False" Parent_ID="Graphics2DCanvas1" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <g id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" visibility="visible" externalResourcesRequired="False" Parent_ID="Graphics2DCanvas1" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1"><line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-3" visibility="visible" stroke="blue" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-9.5" y1="-5" x2="-9.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-4" visibility="visible" stroke="blue" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-8.5" y1="-5" x2="-8.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-5" visibility="visible" stroke="blue" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-7.5" y1="-5" x2="-7.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-6" visibility="visible" stroke="blue" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-6.5" y1="-5" x2="-6.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-7" visibility="visible" stroke="green" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-5.5" y1="-5" x2="-5.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-8" visibility="visible" stroke="green" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-4.5" y1="-5" x2="-4.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-9" visibility="visible" stroke="green" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-3.5" y1="-5" x2="-3.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-10" visibility="visible" stroke="green" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-2.5" y1="-5" x2="-2.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-11" visibility="visible" stroke="yellow" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-1.5" y1="-5" x2="-1.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-12" visibility="visible" stroke="yellow" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-0.5" y1="-5" x2="-0.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-13" visibility="visible" stroke="yellow" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="0.5" y1="-5" x2="0.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-14" visibility="visible" stroke="yellow" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="1.5" y1="-5" x2="1.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-15" visibility="visible" stroke="orange" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="2.5" y1="-5" x2="2.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-16" visibility="visible" stroke="orange" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="3.5" y1="-5" x2="3.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-17" visibility="visible" stroke="orange" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="4.5" y1="-5" x2="4.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-18" visibility="visible" stroke="orange" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="5.5" y1="-5" x2="5.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-19" visibility="visible" stroke="red" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="6.5" y1="-5" x2="6.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-20" visibility="visible" stroke="red" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="7.5" y1="-5" x2="7.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-21" visibility="visible" stroke="red" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="8.5" y1="-5" x2="8.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-22" visibility="visible" stroke="red" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="9.5" y1="-5" x2="9.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
      </g>
      </g>
      </svg>



      Regards
    • Jason Barnabas
      ... I don t know if this will help, but here goes. Before I started working with SVG I had never used vector graphics. It took me a while to figure out how
      Message 2 of 3 , Mar 5, 2013
      • 0 Attachment
        > From: Alireza <ahmadi_rad@...>
        > Sent: Sun, March 3, 2013 6:43:47 PM
        >
        > hello
        >
        > I have an asp.net page which contains auto generated svg shapes. shape is
        >always a rectangle which is filled in gray and 20 color lines as stripes cover
        >a part of this rectangle.
        >
        > Problem:
        > sometimes stroke width is a fractional number less than 1 according to
        >calculations. In such cases the stripes aren't shown if units are in pixel. I
        >changed units of lines to Cm so that fractional numbers are also rendered. This
        >worked but we can not define unit for polygon the same way.
        >
        > Then I tried to define the outer svg "width" and "height" properties in Cm
        >units so that every thing is shown in CM, then polygon and stripe lines are
        >scaled and no more proportional. could you please help?


        I don't know if this will help, but here goes. Before I started working with SVG
        I had never used vector graphics. It took me a while to figure out how some
        things worked. Here's one of the things I had trouble wrapping my head around,
        lines have a width of 0.

        I mean I knew that from math and trig from school, but coming to the realization
        of this fact helped me to understand why SVG behaved the way it did in some
        cases. Lines have to have strokes to be visible and it has been my experience
        that SVG renders stroke-widths of less than 1 as lighter colors so they look
        smaller but the minimum stroke width is still 1 pixel.

        Jason
      • Alireza
        Thanks for your answer In fact I had posted html render of my code in my main post, but since it was too long, only a part of it was included in email alert. I
        Message 3 of 3 , Mar 7, 2013
        • 0 Attachment
          Thanks for your answer

          In fact I had posted html render of my code in my main post, but since it was too long, only a part of it was included in email alert. I summarized the code and post it here once more:

          <svg xmlns="http://www.w3.org/2000/svg" id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1_SVG" viewBox="-20.4572 -2.4845 24.2 12.1" width="10cm" height="10cm" ZoomFactor="1.1">
          <g id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1_SVG_TopMostGroup" transform="scale(1 -1)">
          <polygon id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-1" visibility="visible" fill="gray" fill-rule="inherit" stroke="black" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="0.5%" points="10,5 -10,5 -10,-5 10,-5" externalResourcesRequired="False" Parent_ID="Graphics2DCanvas1" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
          <g id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" visibility="visible" externalResourcesRequired="False" Parent_ID="Graphics2DCanvas1" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1">
          <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-3" visibility="visible" stroke="blue" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-9.5" y1="-5" x2="-9.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
          <line id="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-4" visibility="visible" stroke="blue" stroke-dashoffset="" stroke-linecap="inherit" stroke-linejoin="inherit" stroke-width="1cm" externalResourcesRequired="False" x1="-8.5" y1="-5" x2="-8.5" y2="5" Parent_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1-2" SVG_ID="ctl00_ctl00_MainContent_UnitedPage_CP4_Graphics2DCanvas1" ?="" />
          </g>
          </g>
          </svg>

          This is a polygon and two lines which must be show as stripes on a part of rectangle.

          you can inset it in a test HTML page and see that it doesn't work.

          hope you can help.

          regards

          --- In svg-developers@yahoogroups.com, Jason Barnabas <jtbarnabas@...> wrote:
          >
          > > From: Alireza <ahmadi_rad@...>
          > > Sent: Sun, March 3, 2013 6:43:47 PM
          > >
          > > hello
          > >
          > > I have an asp.net page which contains auto generated svg shapes. shape is
          > >always a rectangle which is filled in gray and 20 color lines as stripes cover
          > >a part of this rectangle.
          > >
          > > Problem:
          > > sometimes stroke width is a fractional number less than 1 according to
          > >calculations. In such cases the stripes aren't shown if units are in pixel. I
          > >changed units of lines to Cm so that fractional numbers are also rendered. This
          > >worked but we can not define unit for polygon the same way.
          > >
          > > Then I tried to define the outer svg "width" and "height" properties in Cm
          > >units so that every thing is shown in CM, then polygon and stripe lines are
          > >scaled and no more proportional. could you please help?
          >
          >
          > I don't know if this will help, but here goes. Before I started working with SVG
          > I had never used vector graphics. It took me a while to figure out how some
          > things worked. Here's one of the things I had trouble wrapping my head around,
          > lines have a width of 0.
          >
          > I mean I knew that from math and trig from school, but coming to the realization
          > of this fact helped me to understand why SVG behaved the way it did in some
          > cases. Lines have to have strokes to be visible and it has been my experience
          > that SVG renders stroke-widths of less than 1 as lighter colors so they look
          > smaller but the minimum stroke width is still 1 pixel.
          >
          > Jason
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.