Skip to content

Instantly share code, notes, and snippets.

@jharris4

jharris4/index.html

Last active August 29, 2015 13:58
Show Gist options
  • Save jharris4/10256931 to your computer and use it in GitHub Desktop.
Save jharris4/10256931 to your computer and use it in GitHub Desktop.
Download ZIP
canvg pattern opacity fix
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<title>Canvg Pattern Test</title>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
</head>
<body>
<div class="content">
<div class="content_section">
<div class="content_header">svg</div>
<div class="content_body">
<svg id="target_svg" width="200" height="100">
<defs>
<pattern id="background_pattern" patternUnits="userSpaceOnUse" width="16" height="16">
<g style="fill: #00f; stroke: none;">
<path d="M0,0 L0,4 L4,0 M0,12 L0,16 L4,16 L16,4 L16,0 L12,0 M16,16 L16,12 L12,16" />
</g>
</pattern>
<pattern id="foreground_pattern" patternUnits="userSpaceOnUse" width="16" height="16">
<g style="fill: #00f; stroke: none;">
<path d="M0,0 L0,4 L4,0 M0,12 L0,16 L4,16 L16,4 L16,0 L12,0 M16,16 L16,12 L12,16" />
</g>
</pattern>
</defs>
<g style="stroke-opacity: 1; fill-opacity: 1;" transform="translate(0,0)">
<rect x="10" y="10" width="80" height="20" style="fill: #00f; stroke: #000; stroke-width: 3px;"></rect>
<rect x="10" y="40" width="80" height="20" style="fill: url(#background_pattern); stroke: #000; stroke-width: 3px;"></rect>
<rect x="20" y="20" width="20" height="60" style="fill: #f00; stroke: none;"></rect>
<rect x="60" y="20" width="20" height="60" style="fill: url(#foreground_pattern); stroke: none;"></rect>
</g>
<g id="target_svg_transparent"style="fill-opacity: 0.5;" transform="translate(100,0)">
<rect style="fill: #00f; stroke: #000; stroke-width: 3px;" x="10" y="10" width="80" height="20"></rect>
<rect x="10" y="40" width="80" height="20" style="fill: url(#background_pattern); stroke: #000; stroke-width: 3px;"></rect>
<rect x="20" y="20" width="20" height="60" style="fill: #f00; stroke: none;"></rect>
<rect x="60" y="20" width="20" height="60" style="fill: url(#foreground_pattern); stroke: none;"></rect>
</g>
</svg>
</div>
</div>
<div class="content_section">
<div class="content_header">canvg canvas</div>
<div class="content_body">
<canvas id="target_canvas" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
canvg(
document.getElementById("target_canvas"),
new XMLSerializer().serializeToString(document.getElementById("target_svg")).trim()
);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment