真正的乘法效果與SVG？

我想知道是否有辦法對svg元素應用真正的乘法效應？我嘗試過在這裏找到的各種解決方案，但它似乎像svg中的乘法效果應用於對象本身，而不是像Photoshop一樣背後的元素。有沒有辦法在svg或其他方法中做到這一點？真正的乘法效果與SVG？

<div id="bg"> 
    <svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 55.7" xml:space="preserve"> 
     <filter id="multiply"> 
      <feBlend mode="multiply"/> 
     </filter> 
     <g>... 
    </svg> 
    </div> 

#logo:hover { 
     filter:url(#multiply); 
}

來源

2014-03-12 Brennan Sei

你能否澄清你的意思是「繁殖」？ –

@Paulie_D當然，我的意思是讓元素的陰影並將它們應用於背後的元素。我可以在#logo http://imageshack.com/a/img691/4503/5cwm.jpg上看到多重應用的示例，您可以通過它看到牆上的浮雕，因爲只有牆上應用了陰影。 –

沒有。 CSS無法處理該AFAIK。 JS雖然可能能夠...... –

好了，所以我發現了2點不同的方式來做到這一點感謝Paulie_D。

1）Pixastic：http://www.pixastic.com/lib/

這是一個JavaScript庫，允許使用的混合模式。然而，它與IE不兼容，但是根據文檔IE瀏覽器有一些方法可以通過一些本機過濾器。

2）在我的情況下，我只是想看到我的文件的行，因此通過使用Photoshop的渠道，我做了牆的阿爾法馬賽克。

我真的不知道哪一個是更優化的選項，但我去了第二個選項，因爲它使得我的背景更輕，由於馬賽克（圍繞40kb比200kb之前）。

非常感謝Paulie，我確實希望將來他們會在瀏覽器中實現乘法效果。

來源

2014-03-12 19:22:58

這是目前不可能繁衍的SVG形狀與CSS定義的背景（除非常非常新的合成和調和的東西這是唯一可用的一個標誌，在我所知的後面。）

使用SVG過濾器可以獲得多重效果，但是您必須遵循SVG過濾器慣例以及瞭解當今瀏覽器中實現的過濾功能的子集。由於單元系統差異&怪癖，因此可以嘗試將適當大小的濾鏡效果轉化爲與CSS組合的現有SVG文件。

這是一個完全在SVG內聯元素中完成的圖形版本，它顯示可以獲得乘法效果，但是這些效果都是在SVG Universe中完成的。

<defs> 
    <filter id="multiply"> 
     <feImage xlink:href="http://imageshack.com/a/img21/7676/y2hg.jpg" result="bg"/> 
     <feBlend mode="multiply" in="SourceGraphic" in2="bg"/> 
    </filter> 
</defs> 
    <g filter="url(#multiply)"> etc.

FWIW：CSS和SVG單元系統，以及過濾器單元之間的相互作用使這個正確有挑戰性大小。

來源

2014-03-13 04:02:44

小提琴鏈接被打破 – aendrew

當瀏覽器實現Compositing and Blending Level 1規範時，您將可以使用'mix-blend-mode'來做到這一點。

#logo:hover { 
    mix-blend-mode: multiply; 
}

查看fiddle。

在Chrome Canary中，啓用實驗性Web平臺功能標誌（chrome：// flags /＃enable-experimental-web-platform-features），以查看它是否正常工作。

來源

2014-03-13 13:03:30

非常有趣，我希望它很快就會發布。$ –

截至2015年6月這是在鉻，火狐，歌劇實施;部分在Safari中，而不在IE中。請參閱http://caniuse.com/#search=mix-blend-mode –

真正的乘法效果與SVG？

回答

相關問題