html5 - How to place two <g> side by side in an svg? -

-

hello new html5 , svg tag.i want ask question svg html element. here code

<html>  <div>    <svg width = "1335" height = "400">      // want have 2 svg:g side side 1 of more width , second of less width         such width of svg = first g + second g       <g>           // elements inside g should have same width g       </g>       <g>       </g>     </svg>  <div> </html>

i have tried using transform.but failed. possible have 2 g elements side side can't set x , y of g ? can 1 guide me of doingthis way.

you can use transform, problem how such values make transformed g @ right place. possible way (the simplest, really) difference between coordinates of bounding boxes. have bounding box bb1 group g1 , bb2 g2, compute translation applied g2.

of course need script computation runtime. such script use

var bb1 = document.getelementbyid("g1").getbbox()

here code

<svg>     <script>         function align(evt) {             var g1 = document.getelementbyid("g1")             var g2 = document.getelementbyid("g2")             var bb1 = g1.getbbox()             var bb2 = g2.getbbox()             g2.setattribute("transform", "translate("+ ((bb1.x+bb1.width)-bb2.x) + " " + ((bb1.y+bb1.height)-bb2.y) + ")")         }     </script>                     <g id="g1">         <rect fill="red" x="10" y="10" width="40" height="30" />     </g>     <g id="g2" onclick="align(evt)">         <rect fill="blue" x="70" y="60" width="100" height="50" />     </g> </svg>

you can experiment on jsfiddle it


Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c++ - Using OpenSSL in a multi-threaded application -

-
i have been writing soap client application in c++ on ubuntu using openssl https transport , pthreads threading. have number of threads - 1 central data acquisition thread periodically gets worker threads make soap requests via shared mutex protected queues. reading documentation openssl found is openssl thread-safe? in openssl faq describes mechanisms required ensure thread safety when using openssl. implemented , works fine. the reason question conceptual difficulty really. thinking implementing same functionality application has already, instead of using threads, create 2 seperate applications : 1 worker thread (of multiple copies running) , main data acquisition thread. use tcp sockets communicate between 2 rather mutex protected queues. may bad idea not important - confusing me would have implement same functions required ensure openssl thread safety in second approach or not? my guess not have , treated independent (indeed surely must many applications use openssl) re...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more