Output of HTML file not displaying image from C generated code

Question

So i have written a C program that outputs an HTML file which is supposed to print out 1000 SVG circles, rectangles and ellipses. When i run the html file in a browser it dones't print any of the shapes out. Heres what part of the code looks like (the beginning and end since it's a thousand lines)

    <!DOCTYPE html>
<html>
<head>
<title>CSC 111 Fall 2015 -  Assignment 5 Part 2</title>
</head>
<body>
CSC 111 Art: <br /><svg width="800px" height="800px">
<g transform="translate(0 800)">
<g transform="scale(1 -1)">
<rect x="0" y="0" width="800" height="800" style="fill: none; stroke-width:     5; stroke:rgb(255,255,255); stroke-opacity:1.0;" />
<circle cx="63" cy="373" r="58" style="fill:rgb(170,190,91); fill-    opacity:0.0"/>
<rect x="265" y="271" width="242" height="325" style="fill:rgb(90,23,196); fill-opacity:0.0"/>
<rect x="356" y="179" width="42" height="314" style="fill:rgb(91,127,53); fill-opacity:0.0"/>
<circle cx="26" cy="327" r="79" style="fill:rgb(151,136,102); fill-opacity:0.0"/>
<rect x="202" y="280" width="127" height="398" style="fill:rgb(85,47,254); fill-opacity:0.0"/>
<circle cx="298" cy="347" r="38" style="fill:rgb(33,95,51); fill-opacity:0.0"/>
<circle cx="112" cy="266" r="19" style="fill:rgb(106,251,120); fill-opacity:0.0"/>
<rect x="275" y="275" width="140" height="37" style="fill:rgb(187,37,21); fill-opacity:0.0"/>
<circle cx="395" cy="11" r="93" style="fill:rgb(139,247,93); fill-opacity:0.0"/>
<rect x="226" y="93" width="102" height="204" style="fill:rgb(140,222,148); fill-opacity:0.0"/>
<circle cx="9" cy="118" r="72" style="fill:rgb(232,14,183); fill-opacity:0.0"/>
<rect x="242" y="148" width="140" height="254" style="fill:rgb(167,132,206); fill-opacity:0.0"/>
<rect x="375" y="397" width="138" height="295" style="fill:rgb(179,175,20); fill-opacity:0.0"/>
</g></g>
</svg>
</body>
</html>

Can anyone point out issues with the code that would make it not run in the browser?

this has nothing to do with the 'c' language. Suggest remove the 'c' tag — user3629249
– user3629249, Commented Oct 28, 2015 at 0:02
this line: fill- opacity:0.0 will probably fail due to the embedded spaces in a keyword — user3629249
– user3629249, Commented Oct 28, 2015 at 0:04
depending on the browser and your overall settings, most of the counts may translate to bytes rather than pixels, which would put most of the graphics off the visible screen. — user3629249
– user3629249, Commented Oct 28, 2015 at 0:19
the use of fill-opacity:0.0 in each object parameters makes the object invisible. You might try:fill-opacity:.5 in each object parameters as a starting point for correcting this problem. — user3629249
– user3629249, Commented Oct 28, 2015 at 0:24

paxdiablo · Accepted Answer · 2015-10-28 01:16:27Z

1

The snippet you've posted runs just fine in a browser but I see two problems straight up.

First the color choice, though this may not be a problem at all depending on your browser color scheme.

If your browser has a background color of white as mine does, you'll never see objects specified with rgb(255,255,255), simply because they'll be rendered as white-on-white.

Second (and this is the real problem), you'll never see objects with fill-opacity:0.0 since they're perfectly transparent (effectively invisible).

If you just want solid non-transparent shapes, you should use 1.0 though, of course, you can choose values between 0 and 1 for varying levels of opacity.

edited Oct 28, 2015 at 1:16

answered Oct 27, 2015 at 23:57

paxdiablo

889k243 gold badges1.6k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Graham Connell Over a year ago

Thanks I just figured it out as you posted this! Really appreciate it!

Collectives™ on Stack Overflow

Output of HTML file not displaying image from C generated code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related