SVG 경로에 SVG 경로가 표시됩니다.

Question

전체 svg 요소를 채우는 SVG rect 중간에 SVG 경로를 표시하려고했습니다. 지금까지 나는 <g> 태그에 경로 요소를 배치하고, 내가 elementgetBBox()에서 왔 값을 기준으로 그룹을 변환 아무 소용이

1. 에, 다음 일을 시도했습니다. 이 값과 전체 SVG 상자의 값을 사용하여 요소의 크기를 조정하는 데 올바른 숫자를 얻으려고했지만 여전히 적합하지도 않고 중심에 있지도 않습니다.
2. # 1과 동일한 작업을 수행했지만 <g> 태그 대신 중첩 된 <svg> 태그를 사용하십시오.
3. 요소 자체를 변형하려고 시도했습니다. 나는 데

주요 문제는 다음과 같습니다

• 동적으로
• 경로 요소의 오른쪽으로 걸어 것으로 보인다 광장에 경로 요소에 맞게 할 수있는 방법을 찾을 수가 캔트 몇몇 이유. 상단 및 좌측면과 평행하게하고 싶습니다.

나는 그것이 도움이된다면 jsfiddle of the svg that I'm trying to work with입니다.

Answer 1

여기 여기에 작업 바이올린을

http://jsfiddle.net/epTp9/3/

을의 경로에 대한 변경된 코드입니다. 방법 # 2의

<g transform="scale(0.4)"> 
<path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path> 

    </g> 

Answer 2

,이 경로의 경계가 무엇인지 명확하지 만약 당신이 바로 그 경계를 찾을 때까지 그냥 뷰 박스 실험, (당신은 그래서 당신이 아닌, 상대 경로 명령을 사용하고 있습니다). 당신의 스타에게는 (50,55 - 460,455)로 밝혀졌습니다.

http://jsfiddle.net/epTp9/4/

및 방법 # 3는 바로 규모를 fuinding 다음 오른쪽 장소에 번역 단지 문제에 대한

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect> 

    <svg width="350" height="200" x="0" y="0" viewBox="50 55 410 400"> 
     <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path> 
     </svg> 

</svg> 

.

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect> 

    <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" 
      transform="scale(0.5) translate(90 -55) "></path> 

</svg> 

http://jsfiddle.net/epTp9/5/

Answer 3

당신이 "RECT"의 ID를 맞게 할 RECT를 줄 경우,이 사각형에 스타 맞는 :

var rectBBox = rect.getBBox(); 
var path = document.getElementById("star-2-outline"); 
var pathBBox = path.getBBox(); 

var scaleX = rectBBox.width/pathBBox.width; 
var scaleY = rectBBox.height/pathBBox.height; 
var translateX = rectBBox.x - pathBBox.x; 
var translateY = rectBBox.y - pathBBox.y; 

path.setAttribute("transform", "scale(" + scaleX + ", " + scaleY + ") translate(" + translateX + ", " + translateY + ")");