SVGパスのスケール方法

私はsvgパスのような要素を拡大縮小しようとしました。しかし、div要素がsvg path要素のために働いていない場合は、スケーリングが正常に機能しています。私は以下のコードを添付しています。なにか提案を？SVGパスのスケール方法

<style> 
 
    .two { 
 
     transition: all 2s ease-in-out 0.5s; 
 
     -webkit-transition: all 2s ease-in-out 0.5s; 
 
    } 
 
    
 
    #scale { 
 
     height: 150px; 
 
     width: 100px; 
 
     text-align: center; 
 
     margin: 0 auto; 
 
    } 
 
    
 
    #scale { 
 
     border: 1px blue solid; 
 
    } 
 
    
 
    .grow:hover { 
 
     transform: scale(2.0); 
 
     -ms-transform: scale(2.0); 
 
     -webkit-transform: scale(2.0); 
 
    } 
 
</style>

<body> 
 
    <svg width="1350" height="900"> 
 
     <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path> 
 
    </svg> 
 
</body>

出典

2016-12-22 Sanjith

たぶん、あなたは、SVGビューポートを変更することによってスケーリングを実装するだろうか？例えば。 http://jonibologna.com/svg-viewbox-and-viewport/#expandingviewport – ne1410s

あなたのコードはかなり壊れています。最初に<body>タグまたは<style>タグを追加する必要はありません。特に、追加の<style>タグにより、.twoクラスの文を解析できないように見えます。

もう1つの問題は、borderのようなCSS属性がSVG要素には適用されないということです。代わりにstrokeおよび/またはstroke-widthを使用してください。

おそらく、主な問題は、SVGコンテンツが原点からかなり離れていることです。あなたが2倍にスケールアップすると、基本的にはすべての座標が倍になります。その結果、図面はSVGビューボックスの右下に表示されなくなります。これを修正する最も簡単な方法は、<g>要素を使用してSVG起点を再配置することです。ここ

はSVGの中央を中心と三角形との単純な例は次のとおり

.two { 
 
    transition: all 2s ease-in-out 0.5s; 
 
    -webkit-transition: all 2s ease-in-out 0.5s; 
 
} 
 
#scale { 
 
    height: 150px; 
 
    width: 100px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 
#scale { 
 
    fill: yellow; 
 
    stroke: blue; 
 
    stroke-width: 2px; 
 
} 
 
.grow:hover { 
 
    transform: scale(2.0); 
 
    -ms-transform: scale(2.0); 
 
    -webkit-transform: scale(2.0); 
 
}

<svg width="220" height="220"> 
 
    <g transform="translate(110,110)"> 
 
    <path d="M0 -43.3 50 43.3 -50 43.3Z" 
 
      id="scale" class="two grow" /> 
 
    </g> 
 
</svg>

出典

2016-12-22 12:33:23

あなたの提案をありがとう。これはクロムブラウザで正常に動作します。しかし、Internet Explorerでは動作しません。 IEでこれを達成する方法は？ – Sanjith

の110,110はどこから来ますか？ – JAT86

@ JAT86これは、座標原点をviewBoxの中央に配置します（幅220、高さ220）。三角形はこの原点の中心に描画されるため、縮尺が変更されたときにはどこにも移動せずに拡大します。（ 'scale'変換はすべての座標に同じ量を掛けます。したがって、原点がまだSVGキャンバスの左上にある場合、三角形はサイズを拡大すると右下にズームします）。 –

SVG要素が向かって又は離れる原点から縮尺します。デフォルトでは、SVGの左上にあります。

シェイプの途中の点を中心にシェイプを縮尺したい場合は、transform-originを使用して新しい原点を設定できます。

下記のデモをご覧ください。

<style> 
 
    .two { 
 
     transition: all 2s ease-in-out 0.5s; 
 
     -webkit-transition: all 2s ease-in-out 0.5s; 
 
    } 
 
    
 
    #scale { 
 
     height: 150px; 
 
     width: 100px; 
 
     text-align: center; 
 
     margin: 0 auto; 
 
    } 
 
    
 
    #scale { 
 
     border: 1px blue solid; 
 
    } 
 
    
 
    .grow:hover { 
 
     transform-origin: 707px 287px; 
 
     transform: scale(2.0); 
 
     -ms-transform: scale(2.0); 
 
     -webkit-transform: scale(2.0); 
 
    } 
 
</style>

<body> 
 
    <svg width="1350" height="900"> 
 
     <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path> 
 
    </svg> 
 
</body>

出典

2016-12-22 15:29:57

SVGパスのスケール方法

答えて

関連する問題