Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/svg-clippath-dynamically.html

Created October 22, 2015 02:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ufologist/be47161b2f960f941259 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ufologist/be47161b2f960f941259 to your computer and use it in GitHub Desktop.
Download ZIP
Define SVG clipPath dynamically
Raw
svg-clippath-dynamically.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Define SVG clipPath dynamically</title>
</head>
<body>
<h1>Define SVG clipPath dynamically</h1>
<!--
<h2>Preview static</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="133">
<defs><clippath id="clippath"><polygon points="64,32 54.6,54.6 32,64 9.4,54.6 0,32 9.4,9.4 32,0 54.6,9.4"></polygon></clippath></defs>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.microfotos.com/pic/1/101/10115/1011503preview4.jpg" width="200" height="133" style="clip-path:url(#clippath);"></image>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.microfotos.com/pic/1/101/10115/1011503preview4.jpg" width="200" height="133" style="opacity: 0.1;"></image>
</svg>
<div>
<p>PS</p>
<ul>
<li>在 HTML 里直接写静态的 SVG 内容时, 无论你使用 clipPath 还是 clippath 都可以!</li>
<li>如果页面上已经有解析过 clipPath 元素后, 那么动态创建时无论你使用 clipPath 还是 clippath 都可以! 我也是醉了!</li>
</ul>
</div>
-->
<h2>Dynamically</h2>
<p><strong>ATTENTION</strong> use createElementNS() and &lt;clipPath&gt; tagName(capital letter P)</p>
<div>
<button onclick="clippath()">clippath</button>
<button onclick="clipPath()">clipPath</button>
</div>
<script>
var svgNs = 'http://www.w3.org/2000/svg';
var xlinkNs = 'http://www.w3.org/1999/xlink';
var imgSrc = 'http://www.microfotos.com/pic/1/101/10115/1011503preview4.jpg';
function newSvg() {
var svg = document.createElementNS(svgNs, 'svg');
svg.setAttribute('xmlns', svgNs);
svg.setAttribute('width', 200);
svg.setAttribute('height', 133);
return svg;
}
function newImage(src) {
var image = document.createElementNS(svgNs, 'image');
image.setAttributeNS(xlinkNs, 'link:href', src);
// 这样也行
// image.setAttributeNS(xlinkNs, 'href', src);
image.setAttribute('width', 200);
image.setAttribute('height', 133);
// 设置 svg 裁剪区域
image.setAttribute('style', 'clip-path:url(#clippath);');
return image;
}
function newShape() {
var shape = document.createElementNS(svgNs, 'polygon');
shape.setAttribute('points', '64,32 54.6,54.6 32,64 9.4,54.6 0,32 9.4,9.4 32,0 54.6,9.4');
return shape;
}
function defineclippath(tagName) {
// 定义裁剪区域
var defs = document.createElementNS(svgNs, 'defs');
var clippath = document.createElementNS(svgNs, tagName);
clippath.setAttribute('id', 'clippath');
clippath.appendChild(newShape());
defs.appendChild(clippath);
return defs;
}
function clippath() {
var svg = newSvg();
svg.appendChild(defineclippath('clippath'));
svg.appendChild(newImage(imgSrc));
document.body.appendChild(svg);
}
function clipPath() {
var svg = newSvg();
// 注意 clipPath 的大小写
svg.appendChild(defineclippath('clipPath'));
svg.appendChild(newImage(imgSrc));
document.body.appendChild(svg);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment