Terra Informatica Forums » htmlayout

SVG

(3 posts)
  • Started 4 years ago by Anonymous
  • Latest reply from Anonymous

Tags:


  1. Anonymous

    hi,
    I have two questions regarding SVG,
    1- Text is not supported in SVG?
    2- I have a control, which is displaying an SVG Image, I want SVG Image to be centerlized and stretched according to width and height of control (e.g. even if i provide it a small svg, it should stretch it accordingly). I am using your style sheet
    .svg
    {
    background-repeat:stretch;
    background-image: url(#SomeSVGLoadedDuringRuntime);
    width:*;
    height:*;
    border: 1px solid threedshadow;
    }
    SVG is being loaded at runtime, I have edited OnLoadData for this. Everything is working fine, except this stretching and centralizing thing. Kindly suggest some solution.

    Posted 4 years ago #
  2. andrew
    Key Master

    Try this:

    <html>
    <head>
      <style>
    
      div#test-svg
      {
        background-repeat:stretch;
        background-image: url(test.svg);
        width:*;
        height:*;
        border: 1px solid threedshadow;
      }  
    
      </style>
    </head>
    <body>
    
     <div #test-svg />
    
    </body>
    </html>

    Where test.svg is this:

    <svg viewBox=\"0 0 100 100\">
    	<g>
    		<linearGradient id=\"Grad1\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">
    			<stop stop-color=\"rgb(238,130,238)\"  offset=\"0\"/>
    			<stop stop-color=\"blue\"  offset=\"0.2\"/>
    			<stop stop-color=\"lime\"  offset=\"0.4\"/>
    			<stop stop-color=\"yellow\"  offset=\"0.6\"/>
    			<stop stop-color=\"rgb(255,165,0)\"  offset=\"0.8\"/>
    			<stop stop-color=\"red\"  offset=\"1\"/>
    		</linearGradient>
    		<rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"url(#Grad1)\" />
    	</g>
    </svg>

    Is this close to what you are looking for?

    Posted 4 years ago #
  3. Anonymous

    It is not much helpful. Infect, in my case the image displayed in an area whose size can be modified. So I Wanted image to be centered and setup itself according to current width and height. The other way could be, I get the width n height of the previewControl (div in our case) and then change viewbox of svg accordingly (i am not sure it will work, I dont have a good knowledge on svg). Or I can use transform in SVG.
    My first thought is to find a way in html, so that it would be easily implemented. Now image displayed on top, left and even padding does not work.
    My HTML looks like (all stylesheets being used are taken from your samples),

    <div class="vcontainer">
    <div class="hspring" >
    <div id="svgPreviewArea" class="svg" titleid="infoTooltip" />
    </div>
    <hr class="vsplitter" />

    And a final word... is there anyway to write text in SVG, or just numbers in a circle.

    Posted 4 years ago #

RSS feed for this topic

Reply

You must log in to post.