مسار مقطع سريع الاستجابة مع SVG مضمن

عند تطبيق مسار مقطع على عنصر بخلفية، فمن الشائع تضمين SVG في السطر. ومع ذلك، قد تواجه مشكلات تتعلق بالاستجابة أو المحاذاة كما هو موضح في المثال أدناه:

المشكلة

في هذا المثال، يحتوي SVG المضمن على أبعاد واضحة (عرض 4000 بكسل)، والتي قد تكون أكبر بكثير من الحجم الفعلي للرأس. ونتيجة لذلك، يصبح مسار المقطع كبيرًا بشكل غير متناسب، مما يؤدي إلى محاذاة غير متوقعة.

الحل: clipPathUnits="objectBoundingBox"

لإنشاء مسار مقطع سريع الاستجابة، يمكنك استخدام clipPathUnits= سمة "objectBoundingBox":

باستخدام هذه السمة، يكون مربع العرض وأبعاد SVG غير ذي صلة، وبدلاً من ذلك يتغير مسار المقطع إلى المربع المحيط بالعنصر الذي يتم تطبيقه عليه. وهذا يضمن محاذاة سريعة الاستجابة ومتسقة لمسار المقطع، بغض النظر عن حجم العنصر.