Question

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

此图片应为说明性

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

我的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>元素：结束，正文和尖端。

然后通过添加三个子<svg>元素将它们组合在一起。在后面是身体<symbol>伸展主<svg>的整个宽度。然后将两个端盖<svg>元件放在前面。每个端盖<svg>占据宽度的一半。但是它们具有“保留AspectRatio”属性，导致它们分别与左端和右端对齐。

如果我们将两个端部几乎完全透亮，您可以看到发生了什么：

＆＃13;

:checked~svg{
    width:500px;
}

＆＃13;

<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>

＆＃13;

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

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

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

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

Answer 2

然后，如果您想用困难的方式做，可以使用JavaScript：

// ID and basic profile are included in DEFAULT_SIGN_IN
GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                            .requestIdToken("YOUR_CLIENT_ID")
                            .requestEmail()
                            .build();

    $("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) );
    		}
    	}

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

2 个答案: