ทำไม <feDropShadow> ไม่แสดง
แก้ไข : พยายามสร้างmcveฉันไม่สามารถแก้ไขปัญหาได้ ตอนนี้ฉันงุนงงไปหมด ทำงานบนโค้ดแซนด์บ็อกซ์ไม่ใช่ในโครงการของฉัน
คำถามเริ่มต้น
ฉันต้องการสร้างองค์ประกอบ SVG แบบอินไลน์แบบไดนามิกและจับคู่การหมุนกับ[(ngModel)]ไฟล์. ไม่มีอะไรแฟนซี
ส่วนที่น่าสนใจคือฉันต้องการใช้<filter>ไฟล์<feDropShadow>. และฉันต้องการให้เงาเป็นแบบไดนามิก (ชี้ขึ้นเสมอโดยไม่คำนึงถึงการหมุนของเข็ม) เป็นสิ่งที่ฉันเคยทำก่อนใช้ Vue
นี่คือซอที่แสดงให้เห็นถึงผลกระทบ: https://jsfiddle.net/websiter/y4ghan0k/
แต่สำหรับชีวิตของฉันฉันไม่สามารถ<feDropShadow>ทำงานใน Angular ได้เมื่อ<svg>มีการแทรกในเทมเพลต มันจะไม่แสดง ไม่มีข้อผิดพลาดหรือคำเตือน หากฉันแทรกมันตาม<img src="path/to/svg">ที่คาดไว้ (เงาจะปรากฏขึ้น) แต่ฉันไม่สามารถหมุนเส้นทางได้อีกต่อไปเนื่องจากองค์ประกอบที่เปลี่ยนไปจะต้องเป็นลูกขององค์ประกอบที่มีตัวกรอง
หมายเหตุก็ไม่ได้เพราะของปัญหาตัวกรองนี้ URL () - ฉันกำลัง prefixing this.location.path()กรองด้วย
นี่คือส่วนสำคัญของรหัสเชิงมุมของฉัน:
component.ts:
import { Location } from '@angular/common';
export class SomeComponent {
constructor(private location: Location) {}
dsLink = `url(${this.location.path()}#drop-shadow)`;
}
component.html:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="180" y="100"
viewBox="0 0 180 100" xml:space="preserve">
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="drop-shadow" height="130%">
<feDropShadow dx="0" dy="-4" flood-color="rgba(0,0,0,.65)"/>
</filter>
</defs>
<g [attr.filter]="dsLink">
<path fill="#fff" d="M102.2,89.5c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4-0.1-0.6L92.9,6.8c-0.1-0.8-3.2-0.9-3.3,0
L78.7,88.5c-0.1,0.2-0.1,0.4-0.1,0.6c0,0.1,0,0.1,0,0.2l0,0.1c0,0,0,0.1,0.1,0.1c0.5,2.4,5.6,4.4,11.7,4.4
c6.2,0.1,11.2-1.8,11.8-4.2c0,0,0.1-0.1,0.1-0.1L102.2,89.5z">
</path>
</g>
</svg>
เพื่อความเรียบง่ายฉันได้ลบออก[(ngModel)]จากเส้นทางซึ่งควรจะหมุนเข็ม
url()ดูเหมือนว่าตัวกรองจะถูกต้องไม่มีข้อผิดพลาด แต่เงาไม่ปรากฏ.
มีอะไรพิเศษที่ฉันต้องทำ / รู้เพื่อที่จะทำให้<svg>องค์ประกอบที่จับเชิงมุมอยู่ในบรรทัด?
ฉันขาดอะไรไป?
คำตอบ
ในที่สุดฉันก็แตกมันฉันจึงโพสต์ไว้ที่นี่หวังว่ามันจะช่วยคนอื่นได้
กล่าวโดยย่อ: ใช้รหัสเฉพาะสำหรับตัวกรองในแต่ละอินสแตนซ์คอมโพเนนต์ของคุณ มิฉะนั้นแต่ละกรณีจะใช้ตัวกรองแรกที่พบใน DOM (กับว่า ID) และถ้าตัวกรองที่จะเกิดขึ้นภายในปกครองด้วยdisplay: none, visibility:hiddenหรือopacity: 0การใช้ตัวกรองจะทำให้สิ่งที่คุณนำไปใช้กับที่มองไม่เห็นเช่นกัน
ปัญหานี้เกี่ยวข้องกับการที่ฉันใช้ส่วนประกอบเดียวกันในแท็บต่างๆ สิ่งนี้สร้างอินสแตนซ์แยกกันของคอมโพเนนต์โดยแต่ละอินสแตนซ์ใช้ id เดียวกัน ( #drop-shadow) แม้ว่าการมีรหัสซ้ำกันนั้นเห็นได้ชัดว่า HTML ไม่ถูกต้อง แต่สิ่งนี้จะไม่เป็นปัญหาหากเราไม่ได้จัดการกับตัวกรอง เนื่องจากองค์ประกอบ<defs>นั้นเหมือนกันจึงไม่สำคัญว่าองค์ประกอบในแท็บที่ 4 จะใช้องค์ประกอบที่<defs>กำหนดไว้ในแท็บแรกหรือไม่
ยกเว้นเมื่อจัดการกับ<filter>s เนื่องจากพวกเขากำลังคำนวณจริงพิกเซลต่อพิกเซลผลการแสดงผลแบบไดนามิก ซึ่งหมายความว่าเมื่อการ<svg>กำหนด<filter>ไม่แสดงผลการใช้ตัวกรองจะทำให้เบราว์เซอร์คำนวณ (พิกเซลต่อพิกเซล) ผลลัพธ์ที่ใช้ตัวกรองและจะส่งผลให้พิกเซลทั้งหมดมองไม่เห็นเสมอ
ดังนั้นวิธีแก้ปัญหาคือการกำหนด id เฉพาะในแต่ละอินสแตนซ์ของคอมโพเนนต์แยกกัน