SVG路径绘制和图像填充
SVG path drawing and filling with image
我需要一些帮助来理解/编辑一些svg路径。我被帮助画了三个相同的三角形(里面有图像),我想把前两个三角形变成一个连续的平行四边形。我玩了很多数字,终于得到了我想要的形状,但图像总是在路径所画形状中间的一条线上重复。我改变了图像的纵横比,但没有用。有人能告诉我我做错了什么吗?下面是一个示例jsFiddle和我的代码。
我想要那里的东西,但需要平行四边形与中间三角形的高度相同(从而完全覆盖它),我需要它不重复图像。从教育的角度来看,任何解释这些不同的属性是如何影响事物的都将非常有帮助。
var width = 800;
var height = 200;
var svg = d3.select(".mydiv").append("svg")
.attr("width",width)
.attr("height",height)
.attr("viewBox", "0 0 250 100");
var defs= svg.append('defs')
defs.append('pattern')
.attr('id', 'pic1')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 115.5)
.attr('height', 100)
.append('svg:image')
.attr('xlink:href', 'http://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg')
.attr("width", 115.5)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
defs.append('pattern')
.attr('id', 'pic2')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 115.5)
.attr('height', 100)
.append('svg:image')
.attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg')
.attr("width", 115.5)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
defs.append('pattern')
.attr('id', 'pic3')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 115.5)
.attr('height', 100)
.append('svg:image')
.attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1')
.attr("width", 115.5)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
svg.append("a")
.append('path')
.attr("d", "M 0,0, 57.7,-100, 115.5,0z")
.attr("transform", "translate(135.5, 100)")
.attr("fill", "url(#pic1)");
svg.append("a")
.append('path')
.attr("d", "M 57.7,0, 0,-100, 115.5,-100z")
.attr("transform", "translate(67.7, 100)")
.attr("fill", "url(#pic2)");
svg.append("a")
.append('path')
.attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0")
.attr("transform", "translate(0, 100)")
.attr("fill", "url(#pic3)");
一种方法是简单地使用patternTransform缩放图像。我还调整了高度,以确保它的位置正确。
var width = 800;
var height = 200;
var svg = d3.select(".mydiv").append("svg")
.attr("width",width)
.attr("height",height)
.attr("viewBox", "0 0 250 100");
var defs= svg.append('defs')
defs.append('pattern')
.attr('id', 'pic1')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 115.5)
.attr('height', 100)
.append('svg:image')
.attr('xlink:href', 'http://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg')
.attr("width", 115.5)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
defs.append('pattern')
.attr('id', 'pic2')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 115.5)
.attr('height', 100)
.append('svg:image')
.attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg')
.attr("width", 115.5)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
defs.append('pattern')
.attr('id', 'pic3')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 115.5)
.attr('height', 75)
.attr('patternTransform', "scale(2)")
.append('svg:image')
.attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1')
.attr("width", 115.5)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
svg.append("a")
.attr("xlink:href", "http://www.google.com")
.append('path')
.attr("d", "M 0,0, 57.7,-100, 115.5,0z")
.attr("transform", "translate(135.5, 100)")
.attr("fill", "url(#pic1)");
svg.append("a")
.attr("xlink:href", "http://www.wikipedia.com")
.append('path')
.attr("d", "M 57.7,0, 0,-100, 115.5,-100z")
.attr("transform", "translate(67.7, 100)")
.attr("fill", "url(#pic2)");
svg.append("a")
.attr("xlink:href", "#testanchor")
.append('path')
.attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0")
.attr("transform", "translate(0, 100)")
.attr("fill", "url(#pic3)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="mydiv">
</div>
相关文章:
- 使用数据库中的图像填充dropzone.js删除图像的问题
- 使用D3用背景图像填充svg
- 用网址图像填充输入
- 如何在paperJS中用图像填充矩形
- Javascript/HTML5使用图像填充画布
- 单击以使用图像填充画布背景
- 使图像填充剩余的垂直空间,无需滚动
- D3使用图案用图像填充形状
- 用图像填充ul li
- 使图像填充屏幕,在不同分辨率下保持宽高比
- 我如何使图像填充90%的屏幕而不失去长宽比
- 上传的图像填充画布Javascript
- Javascript:用数组中的图像填充表
- 为什么在iOS4中http://justplay.thefa.com上的svg图像填充是颠倒的
- Raphael Js不能用图像填充路径
- 为什么W3验证需要为图像填充alt和src属性?
- 使图像填充100%宽度的容器
- 如何将图像填充为链接,这些链接都作为JSON对象存储在数组中
- 用按钮图像填充表单文本字段
- SVG路径绘制和图像填充