'ಎಸ್ವಿಜಿ' ವೀಕ್ಷಣಬಾಕ್ಸ್ (ಎಚ್ಟಿಎಮ್ಎಲ್) ಅನ್ನು ಬಳಸುವ ವೆಬ್ ಡಿಸೈನ್ ಗೈಡ್
ಎಸ್.ವಿ.ಜಿ. ಆಕಾರಗಳನ್ನು ರಚಿಸುವಾಗ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುವ ವೈಶಿಷ್ಟ್ಯವನ್ನು ವೀಕ್ಷಣೆಬಾಕ್ಸ್ ಎನ್ನುತ್ತಾರೆ. ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಎಂದು ನೀವು ಭಾವಿಸಿದರೆ, ವೀಕ್ಷಣೆಯ ಪೆಟ್ಟಿಗೆಯು ವೀಕ್ಷಕರನ್ನು ನೋಡಲು ನೀವು ಬಯಸುವ ಕ್ಯಾನ್ವಾಸ್ನ ಭಾಗವಾಗಿದೆ. ಪುಟವು ಇಡೀ ಕಂಪ್ಯೂಟರ್ ಪರದೆಯನ್ನು ಒಳಗೊಳ್ಳಬಹುದು ಕೂಡ, ಒಟ್ಟಾರೆಯಾಗಿ ಮೂರನೇ ಒಂದು ಭಾಗ ಮಾತ್ರ ಅಸ್ತಿತ್ವದಲ್ಲಿರಬಹುದು.
ಆ ಮೂರನೇಯಲ್ಲಿ ಜೂಮ್ ಇನ್ ಮಾಡಲು ಪಾರ್ಸರ್ಗೆ ಹೇಳಲು ವೀಕ್ಷಣಬಾಕ್ಸ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಹೆಚ್ಚುವರಿ ಬಿಳಿ ಜಾಗವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಇಮೇಜ್ ಅನ್ನು ಕ್ರಾಪ್ ಮಾಡಲು ವಾಸ್ತವಿಕ ವಿಧಾನವಾಗಿ ವೀಕ್ಷಿಸಿ ಪೆಟ್ಟಿಗೆ ಕುರಿತು ಯೋಚಿಸಿ.
ಇದು ಇಲ್ಲದೆ, ನಿಮ್ಮ ಗ್ರಾಫಿಕ್ ಅದರ ನಿಜವಾದ ಗಾತ್ರದ ಮೂರನೆಯದಾಗಿ ಕಾಣಿಸುತ್ತದೆ.
ವೀಕ್ಷಣೆಬಾಹಿರ ಮೌಲ್ಯಗಳು
ಇಮೇಜ್ ಅನ್ನು ಕ್ರಾಪ್ ಮಾಡಲು, ಕಟ್ ಮಾಡಲು ನೀವು ಚಿತ್ರದ ಮೇಲೆ ಅಂಕಗಳನ್ನು ರಚಿಸಿರಬೇಕು. ನೋಟ ಬಾಕ್ಸ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವಾಗ ಅದೇ ನಿಜ. ವೀಕ್ಷಣೆ ಪೆಟ್ಟಿಗೆಗೆ ಮೌಲ್ಯ ಸೆಟ್ಟಿಂಗ್ಗಳು ಸೇರಿವೆ:
- minx- ಆರಂಭದಲ್ಲಿ X ನಿರ್ದೇಶಾಂಕ
- miny- ಆರಂಭದಲ್ಲಿ y ನಿರ್ದೇಶಾಂಕ
- ಅಗಲ ಅಗಲವಾದ ನೋಟಪಟ್ಟಿಯ ಅಗಲ
- ಎತ್ತರ-ವೀಕ್ಷಣೆಬಾಗಿಲಿನ ಎತ್ತರ
ಸಿಂಟ್ಯಾಕ್ಸ್ ವೀಕ್ಷಣೆ ಬಾಕ್ಸ್ ಮೌಲ್ಯಗಳು:
viewBox = "0 0 200 150"
ನೀವು SVG ಡಾಕ್ಯುಮೆಂಟ್ಗಾಗಿ ಹೊಂದಿಸಿದ ಅಗಲ ಮತ್ತು ಎತ್ತರದೊಂದಿಗೆ ವೀಕ್ಷಣೆ ಪೆಟ್ಟಿಗೆಯ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಗೊಂದಲಗೊಳಿಸಬೇಡಿ. ನೀವು SVG ಫೈಲ್ ಅನ್ನು ರಚಿಸಿದಾಗ, ನೀವು ಸ್ಥಾಪಿಸಿದ ಮೊದಲ ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ ಡಾಕ್ಯುಮೆಂಟ್ ಅಗಲ ಮತ್ತು ಎತ್ತರ. ಡಾಕ್ಯುಮೆಂಟ್ ಕ್ಯಾನ್ವಾಸ್ ಆಗಿದೆ. ನೋಟ ಬಾಕ್ಸ್ ಸಂಪೂರ್ಣ ಕ್ಯಾನ್ವಾಸ್ ಅಥವಾ ಅದರ ಒಂದು ಭಾಗವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
ಈ ನೋಟ ಬಾಕ್ಸ್ ಇಡೀ ಪುಟವನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ.
ಈ ನೋಟ ಬಾಕ್ಸ್ ಮೇಲಿನ ಬಲ ಮೂಲೆಯಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುವ ಅರ್ಧ ಪುಟವನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ.
ನಿಮ್ಮ ಆಕಾರವು ಎತ್ತರ ಮತ್ತು ಅಗಲವಾದ ಕಾರ್ಯಗಳನ್ನು ಹೊಂದಿದೆ.
ಇದು 800 x 400 px ಅನ್ನು ಮೇಲ್ಭಾಗದ ಬಲ ಮೂಲೆಯಲ್ಲಿ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ಪುಟದ ಅರ್ಧವನ್ನು ವಿಸ್ತರಿಸುವ ವೀಕ್ಷಣಬಾಕ್ಸ್ನೊಂದಿಗೆ ಒಳಗೊಳ್ಳುವ ಡಾಕ್ಯುಮೆಂಟ್ ಆಗಿದೆ. ಆಕಾರವು ಒಂದು ಆಯಾತವಾಗಿದ್ದು ಅದು ವೀಕ್ಷಣೆ ಪೆಟ್ಟಿಗೆಯ ಮೇಲಿನ ಬಲ ಮೂಲೆಯಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು 100 px ಅನ್ನು ಎಡಕ್ಕೆ ಮತ್ತು 50 px ಗೆ ಚಲಿಸುತ್ತದೆ.
ಏಕೆ ಒಂದು ವೀಕ್ಷಣಬಾಕ್ಸ್ ಹೊಂದಿಸಿ?
ಕೇವಲ ಆಕಾರವನ್ನು ಸೆಳೆಯಲು ಹೆಚ್ಚು SVG ಹೆಚ್ಚು ಮಾಡುತ್ತದೆ. ಇದು ಒಂದು ನೆರಳು ಪರಿಣಾಮಕ್ಕಾಗಿ ಮತ್ತೊಂದು ಚಿತ್ರದ ಮೇಲೆ ಒಂದು ಚಿತ್ರವನ್ನು ರಚಿಸಬಹುದು. ಇದು ಆಕಾರವನ್ನು ರೂಪಾಂತರಗೊಳಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅದು ಒಂದು ದಿಕ್ಕಿನಲ್ಲಿ ಓರೆಯಾಗಿರುತ್ತದೆ. ಮುಂದುವರಿದ ಫಿಲ್ಟರ್ಗಳಿಗಾಗಿ, ನೀವು ವೀಕ್ಷಿಸಿ ಬಾಕ್ಸ್ ಗುಣಲಕ್ಷಣವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು ಮತ್ತು ಬಳಸಬೇಕಾಗುತ್ತದೆ.