>

획 모양이 있습니다. 채우기는 불투명도가 50 % 인 주황색 (알파 = .5 및 rgb (255,112,0))이며 획은 파란색입니다 (투명도 없음).

필터를 사용하여 복사를 만들려고했습니다 (그림자와 비슷하지만 흐림 효과가 없음). 사본이 주황색으로 표시되고 싶습니다.

그러나 나는 이것을 feColorMatrix 로 얻을 수없는 것 같습니다.   SourceGraphic 를 계속 사용  값.

왜 그런지 모르겠지만 도형 채우기가 투명하지 않으면 feComponentTransfer 도 사용합니다  다시 한 번, 단색 사본을 얻을 수 있습니다.

오른쪽의 모양은 모양/획 채우기/불투명도에 관계없이 주황색 (또는 선택한 색상 및 불투명도)을 만들고 싶습니다.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="960" height="540" class="slide" shape-rendering="geometricPrecision" fill-rule="evenodd">
      <rect width="960" height="540" stroke="#385D8A" fill="white" stroke-width="3" class="testSlideBorder" />
      <svg x="10" y="10" overflow="visible" stroke="#0000FF" stroke-miterlimit="8" stroke-width="4">
        <defs>
        <filter id="offsetColoredShape" height="500%" width="500%" x="-275%" y="-275%">
         <feColorMatrix in="SourceAlpha" type="matrix" values="
                                        0 0 0 0 1 
                                        0 0 0 0 0.439
                                        0 0 0 0 0 
                                        0 0 0 1 0"
                                       result="changeToOrangeFill"/>
    	<feComponentTransfer result="changedAgain">
            <feFuncR type="linear" slope="1" />
            <feFuncG type="linear" slope="0.439" />
            <feFuncB type="linear" slope="0" />
            <feFuncA type="linear" slope="1" />
</feComponentTransfer>
    	<feOffset dx="120"/>
	    </filter>               
  </defs>
<use xlink:href="#star" filter="url(#offsetColoredShape)" />
        <path id="star" fill="rgb(255,112,0)" fill-opacity="0.5" d="M0,63.904L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z" />
      </svg>
    </svg>

<path/> 주의 사항  그 fill-opacity="0.5" . fill-opacity="1" 로 변경하면 예상대로 작동합니다. 그 모습은 다음과 같습니다.

     <svg x="10" y="10" overflow="visible" fill="#4472C4" stroke="#0000FF" stroke-miterlimit="8" stroke-width="4">
        <defs>
        <filter id="offsetColoredShape" height="500%" width="500%" x="-275%" y="-275%">
         <feColorMatrix in="SourceAlpha" type="matrix" values="
                                        0 0 0 0 1 
                                        0 0 0 0 0.439
                                        0 0 0 0 0 
                                        0 0 0 1 0"
                                       result="changeToOrangeFill"/>
    	<feComponentTransfer result="changedAgain">
            <feFuncR type="linear" slope="1" />
            <feFuncG type="linear" slope="0.439" />
            <feFuncB type="linear" slope="0" />
            <feFuncA type="linear" slope="1" />
        </feComponentTransfer>
    	<feOffset dx="120"/>
	    </filter>               
        </defs>
        <use xlink:href="#star" filter="url(#offsetColoredShape)" />
        <path id="star" fill="rgb(255,112,0)" fill-opacity="1" d="M0,63.904L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z" />
      </svg>

이것이 도형이 불투명도를 채우더라도 내가 추구하는 것입니다.

어떻게 단색 (검은 색)을 얻을 수 있고 알파 = 100 % 그런 다음 색상을 수정할 수 있으며 원하는 색상/불투명도에 대해 불투명합니까?

SourceGraphic

  • 답변 # 1

    원래 feColorMatrix에서 알파를 100 %로 설정하지 않고 알파를 1로 곱합니다. 알파를 100 %로 설정하려면 다섯 번째 열을 1로 설정해야합니다 (네 번째 열이 아닌) ).

    이제 문제는 모든 배경을 100 % 불투명도로 설정하여 나머지 그래픽 색상이 검은 색으로 표시된다는 것입니다.

    그러나 우리는이 문제를 해결할 수있는 해킹이 있습니다. SourceAlpha를 사용하는 대신-SourceGraphic을 사용하고 알파 행의 처음 세 열을 사용하여 컬러 픽셀의 알파를 100 %로 올리십시오. 그 결과는 앤티 앨리어싱을 억제하기 때문에 약간 바삭 바삭하지만 rgb (1,1,1)을 포함하여 원하는 색상을 얻을 수 있습니다.

    색이 검은 색에 가깝지 않다는 것을 알고 있다면, 255를 좀 더 합리적인 것으로 (5 또는 10과 같은) 다이얼 다운하고 앤티 앨리어싱 중 일부를 유지할 수 있습니다.

         <svg x="10" y="10" overflow="visible" stroke="#0000FF" stroke-miterlimit="8" stroke-width="4" style="background:grey" color-interpolation-filters="sRGB">
            <defs>
            <filter id="offsetColoredShape" height="500%" width="500%" x="-275%" y="-275%">
             <feColorMatrix in="SourceGraphic" type="matrix" values="
                                            0 0 0 0 1 
                                            0 0 0 0 0.439
                                            0 0 0 0 0 
                                            255 255 255 1 0"
                                           result="changeToOrangeFill"/>
    
        	<feOffset dx="80"/>
    	    </filter>               
      </defs>
    <use xlink:href="#star" filter="url(#offsetColoredShape)" />
            <path id="star" fill="rgb(255,112,0)" fill-opacity="0.5" d="M0,63.904L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z" />
          </svg>
    
    

  • 답변 # 2

    #star 를 넣을 수 있습니다   <defs> 의 경로  채우기 또는 획이 없으며 fill-opacity="0.5" 에서 처음으로 사용할 수 있습니다. 파란색 스트로크와 필터를 사용한 두 번째 시간 (필요한 경우)

    svg{border:1px solid}
    
    
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 360 150" class="slide" shape-rendering="geometricPrecision" fill-rule="evenodd">
         
            <defs>
              <path id="star" stroke-miterlimit="8" d="M0,63.904L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z" />
            <filter id="offsetColoredShape" height="500%" width="500%" x="-275%" y="-275%">
             <feColorMatrix in="SourceAlpha" type="matrix" values="
                                            0 0 0 0 1 
                                            0 0 0 0 0.439
                                            0 0 0 0 0 
                                            0 0 0 1 0"
                                           result="changeToOrangeFill"/>
        	<feComponentTransfer result="changedAgain">
                <feFuncR type="linear" slope="1" />
                <feFuncG type="linear" slope="0.439" />
                <feFuncB type="linear" slope="0" />
                <feFuncA type="linear" slope="1" />
    </feComponentTransfer>
        	<feOffset dx="120"/>
    	    </filter>               
      </defs>
    <use xlink:href="#star" filter="url(#offsetColoredShape)" />
    <use xlink:href="#star" fill="rgb(255,112,0)" fill-opacity="0.5" stroke="#0000FF"  stroke-width="4" />
          </svg>
    
    

    업데이트

    OP가 댓글을 달고 있습니다 :

    와이즈 비즈

    사용 된 요소 (즉,

    I'm wondering why, despite discarding all color values and setting alpha to 100% in feColorMatrix the alpha values are retained.

    ) 때문입니다 )에 #star 가 있습니다 . fill-opacity="0.5" 없이 요소를 사용해야합니다  속성.

    이 간단한 예에서는 fill-opacity 를 수정할 수 없음을 알 수 있습니다.   fill 의  사용 된 요소에는 채우기가 있기 때문입니다. 그러나 <use> 이후 스트로크를 추가 할 수 있습니다  요소에 스트로크가 없습니다 :

    <use>
    
    

    OP는 또한 이전 솔루션에 대해 언급하고 있습니다

    와이즈 비즈 다음 데모에서 나는 <svg viewBox="0 0 100 50"> <circle id="c" fill="deepPink" stroke-width="5" cx="20" cy="25" r="10"></circle> <use xlink:href="#c" x="50" fill="gold" stroke="skyBlue" /> </svg> 를 생성합니다 . 다음으로 필터링 된

    doesn't work as the shapes are generated and the filters are simply inserted after the fact.

    를 생성합니다.  요소와 작동합니다

    #star
    
    
    <use>
    
    
    const SVG_NS = 'http://www.w3.org/2000/svg';
    const SVG_XLINK = "http://www.w3.org/1999/xlink";
    const svg = document.querySelector("svg")
    let d = "M0,63.904 L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z"
    let star = drawSVGelmt({d:d,id:"star"},"path", theDefs);
    
    let use1 = document.createElementNS(SVG_NS, 'use');
    use1.setAttributeNS(SVG_XLINK, 'xlink:href', '#star');
    use1.setAttribute('class', 'filtered');
    svg.appendChild(use1)
    
    function drawSVGelmt(o,tag, parent) {
      
      let elmt = document.createElementNS(SVG_NS, tag);
      for (let name in o) {
        if (o.hasOwnProperty(name)) {
          elmt.setAttributeNS(null, name, o[name]);
        }
      }
      parent.appendChild(elmt);
      return elmt;
    }
    
    

    .filtered{filter:url(#offsetColoredShape)}

관련 자료

  • 이전 javascript - `script-loader '소스 코드에서`!!`는 무엇을 의미합니까?
  • 다음 angular - 라우팅이 작동하지만 데이터가 표시되지 않습니다