缩放添加到画布的图像 [英] Scale an image added to canvas
本文介绍了缩放添加到画布的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从svg创建一个图像。
到目前为止我所做的是捕获使用RaphaelJS创建的内联svg，然后使用svg代码创建一个图像然后我将它添加到画布我在这里发现了一个帖子，向我展示了如何缩放图像以适应画布。
但是，我想让图像更大。我对svg和canvas很新，所以我不确定这是不是一个好方法。我的最终目标是生成和图像，我可以添加到PDF格式。我使用的代码如下。
var svgc = document.getElementById（'graph'）。innerHTML;
var image = new Image（）;
image.src =data：image / svg + xml，+ encodeURIComponent（svgc）;
var canvas = document.getElementById（'viewport'）;
context = canvas.getContext（'2d'）;
drawImageScaled（image，context）;
函数drawImageScaled（img，ctx）{
var canvas = ctx.canvas;
var hRatio = canvas.width / img.width;
var vRatio = canvas.height / img.height;
var ratio = Math.min（hRatio，vRatio）;
var centerShift_x =（canvas.width - img.width * ratio）/ 2;
var centerShift_y =（canvas.height - img.height * ratio）/ 2;
ctx.clearRect（0,0，canvas.width，canvas.height）;
ctx.drawImage（img，0,0，img.width，img.height，
centerShift_x，centerShift_y，img.width * ratio，img.height * ratio）;
}
我需要调整画布大小，因为生成的图像太小了。 / p>
我想我需要调整图像大小，但我不确定如何。感谢您的帮助。
我已经包含了raphaeljs创建的svg。
< svg height =500version =1.1width =1000xmlns =http://www.w3.org/2000/svgxmlns：xlink =http：// www。 w3.org/1999/xlinkstyle =overflow：hidden; position：relative; left：-0.5px;>
< desc style = - webkit-tap-highlight-color：rgba（0,0,0,0）;>使用Raphaël2.1.2创建< / desc>
< defs style = - webkit-tap-highlight-color：rgba（0,0,0,0）;>< / defs>
< rect x =200y =20width =50height =460rx =0ry =0fill =nonestroke =＃000style = -webkit-tap-highlight-color：rgba（0,0,0,0）;>< / rect>
< rect x =200y =20width =50height =50rx =0ry =0fill =＃ffff00stroke =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）;不透明度：0.5; opacity =0.5stroke-width =2>< / rect>
< path fill =nonestroke =＃000000d =M300,20L700,20style = - webkit-tap-highlight-color：rgba（0,0,0,0）; >< /路径>
< text x =350y =30text-anchor =middlefont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：middle; font-family ：Arial; font-size：10px;>< tspan dy =3.5style = - webkit-tap-highlight-color：rgba（0,0,0,0）;>示例信息< / TSPAN>< /文本>
< rect x =200y =20width =20height =50rx =0ry =0fill =＃00cc00stroke =＃000000opacity =0.5stroke-width =2style = - webkit-tap-highlight-color：rgba（0,0,0,0）;不透明度：0.5;>< / rect>
< rect x =200y =70width =50height =100rx =0ry =0fill =＃ff0000stroke =＃000000opacity =0.5stroke-width =2style = - webkit-tap-highlight-color：rgba（0,0,0,0）;不透明度：0.5;>< / rect>
< path fill =nonestroke =＃000000d =M300,70L700,70style = - webkit-tap-highlight-color：rgba（0,0,0,0）; >< /路径>
< text x =350y =80text-anchor =middlefont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：middle; font-family ：Arial; font-size：10px;>< tspan dy =3.5style = - webkit-tap-highlight-color：rgba（0,0,0,0）;>示例信息< / TSPAN>< /文本>
< rect x =200y =170width =50height =300rx =0ry =0fill =＃0033ccstroke =＃000000opacity =0.5stroke-width =2style = - webkit-tap-highlight-color：rgba（0,0,0,0）;不透明度：0.5;>< / rect>
< path fill =nonestroke =＃000000d =M300,170L700,170style = - webkit-tap-highlight-color：rgba（0,0,0,0）; >< /路径>
< text x =350y =180text-anchor =middlefont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：middle; font-family ：Arial; font-size：10px;>< tspan dy =3.5style = - webkit-tap-highlight-color：rgba（0,0,0,0）;>示例信息< / TSPAN>< /文本>
< text x =195y =480text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 0℃; / TSPAN>< /文本>
< text x =195y =434text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 50℃; / TSPAN>< /文本>
< text x =195y =388text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 100℃; / TSPAN>< /文本>
< text x =195y =342text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 150℃; / TSPAN>< /文本>
< text x =195y =296text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 200℃; / TSPAN>< /文本>
< text x =195y =250text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 250℃; / TSPAN>< /文本>
< text x =195y =204text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 300℃; / TSPAN>< /文本>
< text x =195y =158text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 350℃; / TSPAN>< /文本>
< text x =195y =112text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 400℃; / TSPAN>< /文本>
< text x =195y =66text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 450℃; / TSPAN>< /文本>
< text x =195y =20text-anchor =endfont-family =& quot; Arial& quot; font-size =10pxstroke =nonefill =＃000000style = - webkit-tap-highlight-color：rgba（0,0,0,0）; text-anchor：end; font-family ：'Fontin Sans'，Fontin-Sans，sans-serif; font-size：11px; font-style：normal; font-variant：normal; font-weight：normal; font-stretch：normal; line-height：normal; font =11px'Fontin Sans'，Fontin-Sans，sans-serif>< tspan dy =4style = - webkit-tap-highlight-color：rgba（0,0,0,0）; > 500℃; / TSPAN>< /文本>
< path fill =nonestroke =＃000000d =M200.5,480L200.5,20M196,480.5L201,480.5M196,434.5L201,434.5M196,388.5L201,388.5M196,342.5L201 ，342.5M196,296.5L201,296.5M196,250.5L201,250.5M196,204.5L201,204.5M196,158.5L201,158.5M196,112.5L201,112.5M196,66.5L201,66.5M196,20.5L201,20.5style = - webkit -tap-highlight-color：rgba（0,0,0,0）;>< / path>
< rect x =100y =20width =15height =460rx =0ry =0fill =nonestroke =＃000style = -webkit-tap-highlight-color：rgba（0,0,0,0）;>< / rect>
< rect x =85y =250width =15height =230rx =0ry =0fill =nonestroke =＃000style = -webkit-tap-highlight-color：rgba（0,0,0,0）;>< / rect>
< rect x =115y =250width =15height =230rx =0ry =0fill =nonestroke =＃000style = -webkit-tap-highlight-color：rgba（0,0,0,0）;>< / rect>
< / svg>
问题是我没有通过设置画布宽度和高度来设置画布高度和宽度与修正图像尺寸的svg相同。
解决方案
你必须定义宽度和 height 。
例如
< svg height =150width =150xmlns =http：// www .w3.org / 2000 / svgversion =1.1>
< rect width =150height =150fill =greenstroke-width =10stroke =black/>
< / svg>
参见 http://jsfiddle.net/372gtsw9/
I am trying to create an image from an svg.
What I have done so far is to capture the inline svg created using RaphaelJS, I then create an image using the svg code and then I'm adding it to a canvas I found a post on here that showed me how to scale the image to fit the canvas.
However, I would like to make the image larger. I am fairly new to svg and canvas so I'm unsure if this is a good approach. My end goal is to generate and image that I can add to a pdf. The code I have used is below.
var svgc = document.getElementById('graph').innerHTML;
var image = new Image();
image.src = "data:image/svg+xml," + encodeURIComponent(svgc);
var canvas = document.getElementById('viewport');
context = canvas.getContext('2d');
drawImageScaled(image, context);
function drawImageScaled(img, ctx) {
var canvas = ctx.canvas;
var hRatio = canvas.width / img.width;
var vRatio = canvas.height / img.height;
var ratio = Math.min(hRatio, vRatio);
var centerShift_x = (canvas.width - img.width * ratio) / 2;
var centerShift_y = (canvas.height - img.height * ratio) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height,
centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
}
I need to resize the canvas because the image generated is far too small.
I think I need to resize the image though but I'm not sure how. Thank you for any help.
Ive included the svg created by raphaeljs below.
<svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: -0.5px;">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
<rect x="200" y="20" width="50" height="460" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
<rect x="200" y="20" width="50" height="50" rx="0" ry="0" fill="#ffff00" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;" opacity="0.5" stroke-width="2"></rect>
<path fill="none" stroke="#000000" d="M300,20L700,20" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<text x="350" y="30" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
<rect x="200" y="20" width="20" height="50" rx="0" ry="0" fill="#00cc00" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
<rect x="200" y="70" width="50" height="100" rx="0" ry="0" fill="#ff0000" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
<path fill="none" stroke="#000000" d="M300,70L700,70" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<text x="350" y="80" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
<rect x="200" y="170" width="50" height="300" rx="0" ry="0" fill="#0033cc" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
<path fill="none" stroke="#000000" d="M300,170L700,170" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<text x="350" y="180" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
<text x="195" y="480" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">0</tspan></text>
<text x="195" y="434" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">50</tspan></text>
<text x="195" y="388" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">100</tspan></text>
<text x="195" y="342" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">150</tspan></text>
<text x="195" y="296" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">200</tspan></text>
<text x="195" y="250" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">250</tspan></text>
<text x="195" y="204" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">300</tspan></text>
<text x="195" y="158" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">350</tspan></text>
<text x="195" y="112" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">400</tspan></text>
<text x="195" y="66" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">450</tspan></text>
<text x="195" y="20" text-anchor="end" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">500</tspan></text>
<path fill="none" stroke="#000000" d="M200.5,480L200.5,20M196,480.5L201,480.5M196,434.5L201,434.5M196,388.5L201,388.5M196,342.5L201,342.5M196,296.5L201,296.5M196,250.5L201,250.5M196,204.5L201,204.5M196,158.5L201,158.5M196,112.5L201,112.5M196,66.5L201,66.5M196,20.5L201,20.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<rect x="100" y="20" width="15" height="460" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
<rect x="85" y="250" width="15" height="230" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
<rect x="115" y="250" width="15" height="230" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
</svg>
The issue was i was not setting the canvas height and width by setting the canvas width and height to the same as the svg it has corrected the image size.
解决方案
you have to define the width and height of the svg image explicitly.
e.g.
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="150" height="150" fill="green" stroke-width="10" stroke="black"/>
</svg>
see http://jsfiddle.net/372gtsw9/
这篇关于缩放添加到画布的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
