تعليمية SVG

SVG 元素

نمط التعبئة لـ SVG

SVG填充图案用于用由图像组成的图案填充形状。该图案可以由SVG图像（形状）或位图图像组成。SVG填充模式看起来就像您从Photoshop等中所习惯的那样，被称为“平铺”。

填充图案示例

这是一个简单的svg填充模式示例：

مثال

<svg　width="500"　height="150">
　　　　<defs>
　　　　　　　　<pattern　id="pattern1"　x="10"　y="10"　width="20"　height="20"　patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"　style="stroke:　#000000;　fill:　url(#pattern1);"></rect>
</svg>

اختبار لمعرفة‹/›

首先，在<defs>元素内定义<pattern>元素。图案包含一个circle元素。该circle元素将用作填充图案。

其次，在CSS属性中<rect>声明一个元素fill，该元素引用<pattern>其style属性中的元素ID。

其次，声明一个<rect>元素，该元素在CSS fill属性中引用其样式属性中的<pattern>元素ID。

تأثير الصورة بعد التنفيذ:

注意<pattern>元素中定义的圆是如何用作矩形的填充的。还要注意圆圈是如何从左到右，从上到下不断重复的。

X，Y，宽度和高度

<pattern>元素的x和y属性定义图案开始在<pattern>元素中的形状中的距离。

<pattern>元素的width和height属性定义图案的宽度和高度。

这是从头开始的示例，并且将xوy设置为0：

مثال

<svg　width="500"　height="150">
　　　　<defs>
　　　　　　　　<pattern　id="pattern2"
　　　　　　　　　　　　　　　　　x="0"　y="0"　width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse">
　　　　　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke:　#000000;　fill:　url(#pattern2);"　/>
</svg>

اختبار لمعرفة‹/›

تأثير الصورة بعد التنفيذ:

لاحظ كيف بدأت النمط الآن من منتصف الدائرة (الجزء العلوي واليساري من المربع). عند إنشاء نماط تعبئة الخاصة بك، ستجد أنك تستخدمxوyالقيم لتحقيق التأثير المطلوب.

العرضوالارتفاعتحدد الخاصية النمط العرض والارتفاع.

في المثال السابقالعرض,الارتفاعكلها تم إعدادها إلى 20، أي قطر الدائرة. لذلك، تكرر الدوائر مرة بعد مرة بدون فجوات.

في هذا المثال، تم إعداد عرض النمط إلى 25 بدلاً من 20. لاحظ أن هناك فجوة بين الدوائر الأفقية الآن قدرها 5 بكسل.

هذا مثال آخرالارتفاعمثال على إعداد 25:

إليك نفس المثال، ولكن مع إعداد x و y إلى 10 (مركز الدائرة داخل علامة <pattern>):

الآن، يبدأ النمط من دائرة كاملة، ولكن هناك مساحة زائدة أفقي وعمودي.

النمط المتداخل

يمكنك تعبئة النمط بشكل متداخل، مما يتيح للنمط استخدام نمط آخر للتعبئة. إليك مثال على نمط تعبئة متداخل، حيث يستخدم المربع نمط دائرة كنمط تعبئة، ويدخل الدائرة نمط المربع كنمط تعبئة.

مثال

<svg　width="500"　height="150">　　　　
<defs>　　　　
<pattern　id="innerPattern"　　　　
x="3"　y="3"　width="9"　height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect　x="0"　y="0"　width="6"　height="6"　　　　
style="stroke:　none;　fill:　#ff0000;"　/>　　　　
</pattern>　　　　
<pattern　id="outerPattern"　　　　
x="12"　y="12"　width="25"　height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　#0000ff;　fill:　url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#outerPattern);"　/>　　　　
</svg>

اختبار لمعرفة‹/›

تأثير الصورة بعد التنفيذ:

كما ترون، الآن يتم تعبئة المربع الخارجي بالدائرة، والدائرة تعبأ بالمربع.

تحويل الأنماط

يمكنك استخدام وظائف تحويل SVG القياسية لتحويل الأنماط. يمكنك استخدام خاصية patternTransform لتحقيق ذلك. إليك مثال على تحويل نمط SVG:

مثال

<svg　width="500"　height="150">　　　　
<defs>　　　　
<pattern　id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

اختبار لمعرفة‹/›

هذا المثال يعرف نمطًا بسيطًا، والذي يتم تقلبه بزاوية 35 درجة قبل استخدامه كنمط تعبئة للمستطيل. تأثير الصورة بعد تشغيلها:

أثر الحجب لـ SVG تدرج SVG