svg code is not displaying at all when used inside an <img> tag -


i have svg here displays fine inside div, not inside img src="data:image/svg+xml;utf8, etc .....

i've swapped svg more simple ones , fine, know it's odd actual svg code.

<svg width="500" height="420"> <style id="mystyle" type="text/css">.node { cursor: pointer;    }   .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px;  }   .node text { font: 10px sans-serif;     }   .link { fill: none; stroke: #000; stroke-width: 1px;    }       .erd-bc { fill: none; stroke: #aaa; stroke-width: 2px;  }       marker {    fill: none;     stroke: #000;   stroke-width: 1px;  }       </style><g transform="translate(120,20)">     <defs>         <marker viewbox="0 0 10 10" id="card-many-end" refx="0" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">             <path d="m 10 0 l 0 5 l 10 10 m 0 5 l 10 5"/>         </marker>     </defs>     <defs>         <marker viewbox="0 0 10 10" id="card-one-end" refx="0" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">             <path d="m 0 5 l 10 5"/>         </marker>     </defs>     <defs>         <marker viewbox="0 0 10 10" id="card-many-start" refx="10" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">             <path d="m 0 0 l 10 5 l 0 10 m 10 5 l 0 5"/>         </marker>     </defs>     <defs>         <marker viewbox="0 0 10 10" id="card-one-start" refx="10" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">             <path d="m 10 5 l 0 5"/>         </marker>     </defs>     <path class="link" marker-end="" marker-start="url(#card-many-start)" d="m60,275c60,300 60,300 60,325" style="opacity: 1;"/>     <path class="link" marker-end="url(#card-many-end)" marker-start="" d="m130,155c130,180 60,180 60,205" style="opacity: 1;"/>     <path class="link" marker-end="url(#card-many-end)" marker-start="" d="m130,155c130,180 200,180 200,205" style="opacity: 1;"/>     <path class="link" marker-end="url(#card-many-end)" marker-start="" d="m130,45c130,70 130,70 130,95" style="opacity: 1;"/>     <g opacity="1" class="node" transform="translate(200,240)">         <g class="node-bc" transform="translate(-60,-25)">             <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>             <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">operation bindings</text>             <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab1</text>         </g>         <text dy="-5em" class="fkcol" text-anchor="middle">port_id</text>     </g><g opacity="1" class="node" transform="translate(60,350)">         <g class="node-bc" transform="translate(-60,-25)">             <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>             <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">operation</text>             <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab2</text>         </g>         <text dy="-5em" class="fkcol" text-anchor="middle"/>     </g><g opacity="1" class="node" transform="translate(60,240)">         <g class="node-bc" transform="translate(-60,-25)">             <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>             <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">intersection</text>             <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab3</text>         </g>         <text dy="-5em" class="fkcol" text-anchor="middle">port_id</text>     </g><g opacity="1" class="node" transform="translate(130,130)">         <g class="node-bc" transform="translate(-60,-25)">             <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>             <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">port</text>             <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab4</text>         </g>         <text dy="-5em" class="fkcol" text-anchor="middle">web_service_id</text>     </g><g opacity="1" class="node" transform="translate(130,20)">         <g class="node-bc" transform="translate(-60,-25)">             <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>             <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">web service</text>             <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab5</text>         </g>         <text dy="-5em" class="fkcol" text-anchor="middle"/>     </g> </g>

you need uri encode file , need give proper namespaces since you're not embedding in html file more. e.g.

<img src='data:image/svg+xml;charset=utf-8,<svg width="500" height="420" xmlns="http://www.w3.org/2000/svg">  <style id="mystyle" type="text/css">.node { cursor: pointer;    }   .node circle { fill: %23fff; stroke: steelblue; stroke-width: 1.5px;  }   .node text { font: 10px sans-serif;     }   .link { fill: none; stroke: %23000; stroke-width: 1px;    }       .erd-bc { fill: none; stroke: %23aaa; stroke-width: 2px;  }       marker {    fill: none;     stroke: %23000;   stroke-width: 1px;  }       </style><g transform="translate(120,20)">      <defs>          <marker viewbox="0 0 10 10" id="card-many-end" refx="0" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">              <path d="m 10 0 l 0 5 l 10 10 m 0 5 l 10 5"/>          </marker>      </defs>      <defs>          <marker viewbox="0 0 10 10" id="card-one-end" refx="0" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">              <path d="m 0 5 l 10 5"/>          </marker>      </defs>      <defs>          <marker viewbox="0 0 10 10" id="card-many-start" refx="10" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">              <path d="m 0 0 l 10 5 l 0 10 m 10 5 l 0 5"/>          </marker>      </defs>      <defs>          <marker viewbox="0 0 10 10" id="card-one-start" refx="10" refy="5" markerwidth="10" markerheight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">              <path d="m 10 5 l 0 5"/>          </marker>      </defs>      <path class="link" marker-end="" marker-start="url(%23card-many-start)" d="m60,275c60,300 60,300 60,325" style="opacity: 1;"/>      <path class="link" marker-end="url(%23card-many-end)" marker-start="" d="m130,155c130,180 60,180 60,205" style="opacity: 1;"/>      <path class="link" marker-end="url(%23card-many-end)" marker-start="" d="m130,155c130,180 200,180 200,205" style="opacity: 1;"/>      <path class="link" marker-end="url(%23card-many-end)" marker-start="" d="m130,45c130,70 130,70 130,95" style="opacity: 1;"/>      <g opacity="1" class="node" transform="translate(200,240)">          <g class="node-bc" transform="translate(-60,-25)">              <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>              <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">operation bindings</text>              <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab1</text>          </g>          <text dy="-5em" class="fkcol" text-anchor="middle">port_id</text>      </g><g opacity="1" class="node" transform="translate(60,350)">          <g class="node-bc" transform="translate(-60,-25)">              <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>              <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">operation</text>              <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab2</text>          </g>          <text dy="-5em" class="fkcol" text-anchor="middle"/>      </g><g opacity="1" class="node" transform="translate(60,240)">          <g class="node-bc" transform="translate(-60,-25)">              <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>              <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">intersection</text>              <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab3</text>          </g>          <text dy="-5em" class="fkcol" text-anchor="middle">port_id</text>      </g><g opacity="1" class="node" transform="translate(130,130)">          <g class="node-bc" transform="translate(-60,-25)">              <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>              <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">port</text>              <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab4</text>          </g>          <text dy="-5em" class="fkcol" text-anchor="middle">web_service_id</text>      </g><g opacity="1" class="node" transform="translate(130,20)">          <g class="node-bc" transform="translate(-60,-25)">              <rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>              <text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">web service</text>              <text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">tab5</text>          </g>          <text dy="-5em" class="fkcol" text-anchor="middle"/>      </g>  </g>  </svg>'></img>


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more