以不同方式缩放SVG文件的不同部分

Question

对于带有锯齿边缘的票证，我需要一个可变高度的svg-graphic。顶部和底部区段应按比例缩放以保持固定的纵横比，而中间区段应伸展以适合容器的尺寸。

这张图片应该是说明性的

我发现this jsFiddle在水平而不是垂直方面做了很多我想做的事情，但我对viewbox不够精通以了解正在发生的事情并根据我的需要进行调整。我只是弄乱了我的档案。

我的svg文件目前非常简单;顶部路径，底部路径和中间的矩形。它看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="464px" height="464px" viewBox="0 0 464 464" enable-background="new 0 0 464 464" xml:space="preserve">
    <path fill="#FFF100" d="M432.846,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839
        c0.057,5.754-4.563,10.465-10.316,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.843
        c0.058,5.754-4.561,10.465-10.315,10.522S339.021,5.96,338.965,0.206c0-0.069,0-0.137,0-0.206h-20.836
        c0.057,5.754-4.562,10.465-10.316,10.522c-5.754,0.057-10.465-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.437
        c0,24.772-20.082,44.853-44.854,44.853c-24.771,0-44.853-20.081-44.853-44.853H166.71c0.056,5.754-4.562,10.465-10.317,10.522
        c-5.754,0.057-10.465-4.562-10.521-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839c0.098,5.754-4.486,10.498-10.24,10.596
        c-5.754,0.099-10.498-4.486-10.596-10.24c-0.002-0.119-0.002-0.238,0-0.356H83.355c0.057,5.754-4.563,10.465-10.317,10.522
        S62.573,5.96,62.517,0.206c0-0.069,0-0.137,0-0.206H41.677c0.057,5.754-4.562,10.465-10.316,10.522
        C25.607,10.579,20.896,5.96,20.839,0.206c-0.001-0.069-0.001-0.137,0-0.206H0v56h464V0h-20.839
        C443.219,5.754,438.6,10.465,432.846,10.522z"/>
    <path fill="#FFF100" d="M432.846,453.478c-5.755-0.056-10.466,4.563-10.522,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839
        c0.057-5.754-4.563-10.466-10.316-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.843
        c0.058-5.754-4.561-10.466-10.315-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.836
        c0.057-5.754-4.562-10.466-10.316-10.522c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.437
        c0-24.771-20.082-44.854-44.854-44.854c-24.771,0-44.853,20.082-44.853,44.854H166.71c0.056-5.754-4.562-10.466-10.317-10.522
        c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839c0.098-5.754-4.487-10.498-10.24-10.597
        c-5.754-0.098-10.498,4.486-10.596,10.24c-0.002,0.119-0.002,0.238,0,0.356H83.355c0.057-5.754-4.563-10.466-10.317-10.522
        c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205H41.677c0.057-5.754-4.562-10.466-10.316-10.522
        c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205H0v-56h464v56h-20.839
        C443.219,458.246,438.6,453.534,432.846,453.478z"/>
    <rect y="56" fill="#00AEEF" width="464" height="352"/>
</svg>

如果有人能够帮助我，我会很高兴。

Answer 1

通常，您无法以不同于其他部分的方式扩展SVG的某些部分。然而，有一些简单的情况（比如你链接的铅笔图像），你可能会很棘手，并构建一个有效的。

铅笔是如何工作的

它首先为铅笔的三个部分中的每一个定义一个<symbol>元素：末端，身体和尖端。

然后它通过添加三个孩子q​​azxswpoi元素组合它们。在后面是身体<svg>拉伸主要<symbol>的整个宽度。然后将两个端盖<svg>元件放在前面。每个端盖<svg>占据宽度的一半。但它们具有'preserveAspectRatio`属性，导致它们分别与左端和右端对齐。

如果我们使两个端部几乎完全半透明，你可以看到发生了什么：

<svg>

:checked~svg{
    width:500px;
}

您可以看到身体如何被拉伸到整个宽度以及端盖如何放置在末端以隐藏拉伸的身体。

这个技巧才有效，因为铅笔有一个坚实的背景（黄色）。但我认为你希望你票的穿孔末端是透明的，所以这个技巧对你不起作用。如果你对白色是好的，那么它会。

对你来说可能更简单的是将三个部分叠加在一起。

<input type="checkbox"/><br/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<g id="source">
			<rect width="200" height="100" fill="yellow"/>
			<circle cx="50" cy="50" r="40" fill="red"/>
			<rect x="50" y="10" width="100" height="80" fill="orange"/>
			<path d="M150,10L190,50 150,90z" fill="pink"/>
		</g>
		<symbol id="left" viewBox="0 0 50 100" preserveAspectRatio="none">
			<use xlink:href="#source"/>
		</symbol>
		<symbol id="middle" viewBox="50 0 100 100" preserveAspectRatio="none">
			<use xlink:href="#source"/>
		</symbol>
		<symbol id="right" viewBox="150 0 50 100" preserveAspectRatio="none">
			<use xlink:href="#source"/>
		</symbol>
	</defs>
	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
		<use xlink:href="#middle" width="1" height="1"/>
	</svg>
	<svg viewBox="0 0 1 2" preserveAspectRatio="xMinYMid">
		<use xlink:href="#left" width="1" height="2" opacity="0.1"/>
	</svg>
	<svg viewBox="0 0 1 2" preserveAspectRatio="xMaxYMid">
		<use xlink:href="#right" width="1" height="2" opacity="0.2"/>
	</svg>
</svg>

Answer 2

再说一遍，如果你想要这么做，你可以使用JavaScript：

<svg>  (the top of the ticket)
<div>  (containing the ticket body contents)
<svg>  (the bottom of the ticket)

    $("input#resize").on("click", function(){
    		if($("input#resize:checked").length){
    			scaleSvgBorder();
    		}
    	});
    	function scaleSvgBorder(){
      		if ($("svg#myFancyBorder").length && $("svg#myFancyBorder").height() > 0){
            //first we need the ratio between the SVG grid and our beloved HTML pixels.
                  var svgRatio = $("svg#myFancyBorder").height() / $("svg#myFancyBorder").attr("viewBox").split(" ")[3];
            //Next we need to figure out which scale to apply on the sides group inside our SVG. 
            //We do this by calculating the height we want the sides to be (in pixels), and divide it by the current height of the sides (in pixels).
                  var sidesCurrentHeightPx = $("svg#myFancyBorder #sides")[0].getBBox().height * svgRatio;
            //Let's subtract the top & bottom of our border from the container height, in order to get the height we want the sides to be (in pixels).
    			  var nonScalingPartsHeightPx = ($("svg#myFancyBorder #top")[0].getBBox().height + $("svg#myFancyBorder #bottom")[0].getBBox().height) * svgRatio;
    			  var sidesTargetHeightPx = $("#container").height() - nonScalingPartsHeightPx;
            //Finally, we have the scale ratio!
    			  var scaleRatio = sidesTargetHeightPx / sidesCurrentHeightPx;
            //We need to subtract the scaled top from the top for an additional sides translation transformation, since they will move, because SVG scales from 0, 0!
    			  var scaledTopDifference = $("svg#myFancyBorder #top")[0].getBBox().height - ($("svg#myFancyBorder #top")[0].getBBox().height * scaleRatio);
            //We need to subtract the scaled sides from the sides for the bottom translation, because SVG scales from 0, 0!
        		var scaledSidesDifference = $("svg#myFancyBorder #sides")[0].getBBox().height - ($("svg#myFancyBorder #sides")[0].getBBox().height * scaleRatio);
            //Notice that we have to apply the scale ratio to the translation transformation if we place it AFTER the scale transformation!!!
    			  $("svg#myFancyBorder #sides").attr("transform", "scale(1, " + scaleRatio + ") translate(0, " + (scaledTopDifference / scaleRatio) +")");
            //* -1 because it has to move down.
    			  $("svg#myFancyBorder #bottom").attr("transform", "translate(0, " + ( scaledSidesDifference * -1 ) +")");
            //Let's stretch the viewbox to the height of the container too!
    			  $("svg#myFancyBorder").attr('viewBox', "0 0 "+ $("svg#myFancyBorder").attr("viewBox").split(" ")[2] +" "+ ($("#container").height() / svgRatio) );
    		}
    	}

#container{
  position: relative;
  width: 200px;
  height: 400px;
  background-color: #cde
}
svg#myFancyBorder{
  position: absolute;
  width: 100%;
  height: auto;
}